Forum PHP.pl > Wysyłanie danych z formularza...

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wysyłanie danych z formularza...

lukesh

18.02.2007, 23:43:48

Witam!

Chciałbym zapytać, jak będzie wyglądał skrypt, który prześle dane z formularza metodą POST do dowolnego pliku, nie przeładowując przy tym strony?

Dla przykładu, prosty formularz:

[HTML] pobierz, plaintext 
<form method="post" action="akcja.php">
<input type="text" name="nazwa">
<input type="submit" value="OK">
</form>
[HTML] pobierz, plaintext

Standardowo, przeglądarka przejdzie na stronę akcja.php, gdzie zawartość pola "nazwa" zostanie przekazana.

Jak tego uniknąć? Chodzi mi głównie o skrypt JS, który prześle tę informację do pliku akcja.php i wyświetli plik akcja.php, który może wyglądać np. tak:

[PHP] pobierz, plaintext 
<?php
echo "$nazwa";
?>
[PHP] pobierz, plaintext

Pozdrawiam,
z góry dzięki za pomoc!

kriqs

19.02.2007, 00:50:35

dzial jest dobry wiec wiesz czego szukasz ale ci sie nie chce

poszukaj o "advAjax" znajdziesz napewno

pozdrawiam

lukesh

19.02.2007, 02:45:17

Witam ponownie!

Nie interesują mnie żadne gotowe AJAKSY, jak np. advAjax czy mintAjax... Chciałem zrobić coś swojego, aby użytkownik nie musiał pobierać pliku z niepotrzebnymi mu do niczego funkcjami...

Przeszukałem trochę internat i na podstawie stron: http://developer.mozilla.org/pl/docs/AJAX:Na_pocz%C4%85tek i http://www.captain.at/howto-ajax-form-post-request.php udało mi się stworzyć prosty skrypt, który przesyła dane z formularza do pliku PHP, nieprzechodząc do kolejnej strony...

Oto kod pliku html:

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript" language="javascript">
    var http_request = false;
    function makePOSTRequest(url, parameters) {
        http_request = false;
        if (window.XMLHttpRequest) {
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) {
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
 
        http_request.onreadystatechange = function(){
            if (http_request.readyState == 1) {
                document.getElementById('div').innerHTML = "Ładowanie...";
            }
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    result = http_request.responseText;
                    document.getElementById('div').innerHTML = result;
                }
                else {
                    document.getElementById('div').innerHTML = "Wystąpił błąd!";
                }
            }
        };
 
        http_request.open('POST', url, true);
        http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        http_request.send(parameters);
 
        }
 
        function get() {
            var dane = "tekst=" + encodeURIComponent( document.getElementById("tekst").value );
            makePOSTRequest('post.php', dane);
        }
</script>
</head>
<body>
<form action="java script:get();">
<textarea id="tekst"></textarea><br>
<input type="submit" name="button" value="Wyślij">
</form>
<br>
Tekst: <div id="div"></div>
</body>
</html>
[HTML] pobierz, plaintext

I plik PHP (post.php):

[PHP] pobierz, plaintext 
<?
echo "$tekst";
?>
[PHP] pobierz, plaintext

Wszystko działa tak, jak powinno, ale nie jestem do końca pewien, czy kod jest dobrze napisany... Nigdy wcześniej nie miałem styczności z JS, nie modyfikowałem żadnego innego kodu, nie mam o tym najmniejszego pojęcia... Ten kod starałem się napisać intuicyjnie, myśląc logicznie... Chyba się udało.

Bynajmniej - proszę o jakieś komentarze.

Pozdrawiam!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.