Jak przesłać formularze AJAX za pomocą JQuery
wprowadzenie
jQuery można sparować z przesyłaniem formularzy, aby obsłużyć walidację. Ma to tę zaletę, że zapewnia użytkownikom informacje zwrotne na temat wszelkich błędów w ich danych wejściowych.
w tym samouczku zostanie przedstawiony przykładowy formularz, który komunikuje się z zapleczem PHP. Formularz będzie używał jQuery do przetwarzania formularza bez odświeżania strony (przy użyciu AJAX), Wskazywania błędów, a także wyświetlania komunikatu o sukcesie.
aby ukończyć ten tutorial, musisz:
- ten poradnik zakłada, że masz PHP zainstalowane lokalnie i są w stanie uruchomić wbudowany serwer WWW. Możesz być w stanie skonsultować się z jednym z naszych samouczków dotyczących instalacji PHP w swoim środowisku.
- trochę znajomości selektorów i metod z biblioteki jQuery.
- trochę znajomości klas z biblioteki Bootstrap.
- edytor kodu.
- nowoczesna przeglądarka internetowa.
Uwaga: Ten samouczek nie określa najnowszych wersji jQuery (obecnie 3.5.1) ani Bootstrap (obecnie 5.0.0-beta1). Jednak wiele lekcji w tym samouczku nadal odnosi się do najnowszych wersji.
ten poradnik został zweryfikowany z PHP v7.3.24, jQuery v2.0.3 i Bootstrap v3.0.3.
Krok 1 — budowanie zaplecza za pomocą PHP
na potrzeby tego samouczka zaplecze zostanie napisane w PHP.
najpierw otwórz okno terminala i utwórz nowy katalog projektu:
- mkdir jquery-form-validation
przejdź do nowego katalogu projektów:
- cd jquery-form-validation
następnie użyj edytora kodu, aby utworzyć nowy plik process.php:
<?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data);ten plik przyjmie wartości dla name, email i superheroAlias. Jeśli którakolwiek z tych wartości nie zostanie podana, zostanie odesłany komunikat o błędzie. W tym momencie można wykonać wiele innych walidacji, ale na potrzeby tego samouczka będziesz tylko upewniał się, że te wymagane dane wejściowe zostały dostarczone. W przeciwnym razie, jeśli występują wartości name, email i superheroAlias, komunikat o powodzeniu zostanie odesłany.
Uwaga: W rzeczywistym scenariuszu zaplecze będzie również odpowiedzialne za inne zadania, takie jak pobieranie danych i zapisywanie zmian w bazie danych, tworzenie sesji lub wysyłanie wiadomości e-mail.
po zakończeniu przetwarzania formularza możesz go utworzyć.
Krok 2-budowanie frontendu z HTML i CSS
na potrzeby tego kursu, Bootstrap zostanie użyty do zbudowania widoków.
w katalogu projektu użyj edytora kodu, aby utworzyć plik index.html:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></head> <body> <div class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <form action="process.php" method="POST"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow" /> </div> <button type="submit" class="btn btn-success"> Submit </button> </form> </div> </body></html> wersja CDN (content delivery network) Bootstrap i jQuery zostanie odwołana. Formularz action zostanie ustawiony na plik PHP utworzony wcześniej. Formularz będzie składał się z pól dla name, emaili superheroAlias. Formularz będzie również potrzebował przycisku przesyłania.
Otwórz okno terminala i przejdź do katalogu projektu. I uruchomić serwer PHP:
- php -S localhost:8000
odwiedź localhost:8000 w swojej przeglądarce i obserwuj następujące:
Po wypełnieniu formularza możesz utworzyć skrypt do obsługi przesyłania formularza.
Krok 3-Obsługa formularza Wyślij logikę w JavaScript i jQuery
aby przesłać formularz za pośrednictwem AJAX, Twój skrypt będzie musiał obsłużyć cztery zadania:
- Uchwyć przycisk Prześlij formularz, aby domyślna akcja nie miała miejsca.
- Pobierz wszystkie dane z formularza za pomocą jQuery.
- Prześlij dane formularza za pomocą AJAX.
- wyświetl błędy, jeśli istnieją.
w katalogu projektu użyj edytora kodu, aby utworzyć nowy formularz form.js plik:
$(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); });}); ten kod pobiera dane z pól name, email i superheroAlias. Następnie wykonuje żądanie AJAX do process.php z ładunkiem danych formularza. Po pomyślnym połączeniu konsola zarejestruje DANE odpowiedzi. event.preventDefault() jest używany, aby zapobiec domyślnemu zachowaniu formularza poprzez przeładowanie strony podczas składania.
po zapisaniu zmian na form.js, odwiedź ponownie plik index.html za pomocą edytora kodu. Dodaj odniesienie do nowego pliku JavaScript:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->teraz, gdy użytkownik naciśnie przycisk Submit na formularzu, kod JavaScript pobierze wszystkie wartości wejściowe i wyśle żądanie POST do process.php.
Uwaga: będziesz używać wywołania zwrotnego .done do obsługi pomyślnego żądania AJAX. To kiedyś nazywało się .success, ale od tego czasu zostało wycofane w jQuery 1.8+.
inną alternatywą jest użycie serialize zamiast wyciągania informacji o formularzu pojedynczo.
skrypt PHP przetworzy dane wejściowe wysłane przez wywołanie AJAX i zwróci utworzoną tablicę $data. Możesz to zaobserwować w konsoli przeglądarki po przesłaniu formularza:
po zakończeniu logiki formularza możesz utworzyć skrypt obsługujący błędy formularza.
Krok 4-wyświetlanie błędów walidacji formularzy
w skrypcie PHP kod sprawdza, czy wszystkie pola są wymagane. Jeśli pole nie jest obecne, wysyłany jest błąd.
odwiedź ponownie form.js i dodaj następujące wyróżnione linie kodu:
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '<div class="help-block">' + data.errors.name + "</div>" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '<div class="help-block">' + data.errors.email + "</div>" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '<div class="help-block">' + data.errors.superheroAlias + "</div>" ); } } else { $("form").html( '<div class="alert alert-success">' + data.message + "</div>" ); } }); event.preventDefault(); });// ... ten kod sprawdza, czy odpowiedź zawiera błąd dla każdego pola. Jeśli wystąpił błąd, dodaje klasę has-error i dołącza komunikat o błędzie.
teraz odwiedź ponownie formularz w przeglądarce internetowej i eksperymentuj z przesyłaniem danych za pomocą formularza.
jeśli pojawią się jakieś błędy, które wrócą z serwera, formularz dostarczy informacje zwrotne na temat wymaganych pól:
i jeśli nie ma błędów, które wrócą z serwera, formularz dostarczy opinię o pomyślnym przesłaniu:
za każdym razem, gdy przesyłamy formularz, nasze błędy z poprzedniego zgłoszenia nadal tam są. Musisz je wyczyścić, usuwając je natychmiast po ponownym przesłaniu formularza.
odwiedź ponownie form.js i dodaj następujące wyróżnione linie kodu:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ... ten kod usunie klasę has-error ze wszystkich elementów .form-group. Usunie również wszystkie elementy .help-block z komunikatami o błędach.
Krok 5 — wyświetlanie błędów połączenia z serwerem
jeśli wystąpi błąd połączenia z serwerem, nie będzie odpowiedzi JSON z połączenia AJAX. Aby uniemożliwić użytkownikom oczekiwanie na odpowiedź, która nigdy nie dotrze, możesz podać komunikat o błędzie w przypadku awarii połączenia.
odwiedź ponownie form.js i dodaj następujące wyróżnione linie kodu:
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '<div class="alert alert-danger">Could not reach server, please try again later.</div>' ); });// ...jeśli serwer jest zepsuty lub wyłączony z jakiegokolwiek powodu, użytkownik, który spróbuje przesłać formularz, otrzyma komunikat o błędzie:
po zakończeniu komunikatu o błędzie serwera wypełniłeś przykładowy formularz.
używając $.post zamiast $.ajax
jQuery dostarcza również metodę skróconą $.postjako alternatywę dla $.ajax.
kod $.ajax w form.js można przepisać za pomocą $.post:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here });zaletą $.post jest to, że nie wymaga zadeklarowania tak dużej konfiguracji połączenia.
podsumowanie
w tym artykule zbudowałeś przykładowy formularz, który komunikuje się z zapleczem PHP za pomocą jQuery i wyświetla wszelkie błędy w formularzu.
następnym krokiem będzie zbadanie bardziej złożonych walidacji, takich jak poprawne adresy e-mail i daty. Możesz być również zainteresowany zastosowaniem walidacji po stronie klienta, które działają w przeglądarce.
jeśli chcesz dowiedzieć się więcej o JavaScript, zajrzyj na naszą stronę poświęconą JavaScript, aby zapoznać się z ćwiczeniami i projektami programistycznymi.