Formularz oparty o AJAX i jQuery bez konieczności przeładowania strony przy zatwierdzaniu na przykładzie formularza logowania

Poniższy tekst zaprezentuje prosty formularz logowania zawierający pole loginu oraz hasła. Zatwierdzanie formularza i jego dalsze przekazanie do skryptu PHP będzie odbywać się bez przeładowania i odświeżania strony. Wszystko działać będzie dzięki technologii AJAX i w oparciu o bibliotekę jQuery.

Budowa formularza

Poniżej mamy bardzo prosty formularz składający się zaledwie z dwóch pól i przycisku.

<form>  
    <input type="text" name="login" id="login" />  
    <input type="text" name="password" id="password" />  
    <input type="button" id="submit" />  
</form>

Podpięcie akcji pod przycisk

Poniżej pokazane jest w jaki sposób podpiąć zdarzenie pod nasz przycisk. Kod należy umieścić albo w zewnętrznym pliku Javascript i podpiąć go do HTML za pomocą standardowego tagu:

<script type="text/javascript" src="ajax_form.js"></script>

lub umieścić bezpośrednio w pliku HTML jak poniżej.

<script type="text/javascript">
    $(function() {  
        $("#submit").click(function() {  
            //TUTAJ UMIEŚCIMY KOD OPISANY PONIŻEJ
        });  
    }); 
</script>

Powyższy kod spowoduje, iż tuż po załadowaniu strony, pod przycisk formularza zostanie podpięta akcja, której faktyczny kod opiszę poniżej.

Przesłanie danych

Poniżej znajduje się kod, który ma zastąpić zakomentowany powyżej tekst. Odpowiedzialny jest on za pobranie danych z formularza, przesłanie do PHP i odczytanie odpowiedzi. Powyżej zaproponowałem rozwiązanie podpinania akcji pod przycisk za pomocą funkcji click. Nie jest to jedyne rozwiązanie. Możemy poniższy kod wpisać bezpośrednio pod zdarzenie onclick naszego przycisku.

var login = $('#login').val(); 
var password = $('#password').val();
var dataString = 'login='+ login + '&password=' + password;
 
$.ajax({  
    type: 'POST',  
    url: 'skrypt.php',
    data: dataString,  
    success: function(data) {
        if( data == '0' )
            alert( 'Błędne dane logowania!!!' );
        else
            window.location = window.location;
    }  
});

Co tam się dzieje powyżej… Najpierw pobieramy dane z formularza i tworzymy z nich odpowiedni string dla POST. Następnie wywołujemy mechanizm AJAX zaimplementowany w jQuery. Przesyłamy dane do skrypty PHP i odbieramy odpowiedź. Gdy odpowiedzią jest 0 to informujemy o błędnych danych logowania, a gdy odpowiedź jest inna, to odświeżamy stronę.