Prześlij formularz bez odświeżania strony - PHP/JQuery

Przesyłając formularz, użytkownicy oczekują bezproblemowej wrażenia użytkownika. Nawet najmniejsze zakłócenia w przeglądaniu może prowadzić do spadku współczynnika konwersji. Załóżmy, że Twoja witryna ma wiele małych formularzy, które wymagają od użytkowników wprowadzania danych osobowych, adresów i innych poufnych informacji. W takim przypadku musisz rozważyć wdrożenie funkcji sprawdzania poprawności AJAX i automatycznej realizacji, aby zmniejszyć ryzyko utraty danych.

Ten post na blogu nauczy Cię, jak tworzyć formularz Ajax bez odświeżania strony za pomocą PHP i jQuery. Będziesz także mógł wdrożyć funkcje AutoSave dla odwiedzających witrynę i zobaczyć przykłady, w jaki sposób najlepsze praktyki można wdrożyć w scenariuszach prawdziwych. Zacznijmy!

1. Główna strona internetowa

Utwórz i indeks.html Plik w Twojej witrynie za pomocą następującej treści. To jest główny formularz HTML, który będzie wyświetlany na stronie internetowej. Możesz po prostu zintegrować formularz z dowolną stronę internetową.

 Prześlij formularz bez odświeżania strony - PHP/JQuery - Tecadmin.Nazwa netto: 
 E-mail: 
 Nr telefonu:
 Płeć Mężczyzna Kobieta
   
 Twoje dane będą wyświetlane poniżej… 
 ==============================
      

2. Utwórz JavaScript

Teraz utwórz stronę JavaScript z nazwą składać.JS wewnątrz JS katalog za pomocą następującej treści. Możesz zoptymalizować ten JavaScript, dodając walidacje jQuery.

funkcja eptItFormData () var name = $ ("#name").val (); var e -mail = $ ("#e -mail").val (); var Phone = $ („#Phone”).val (); var gender = $ ("input [type = radio]: checked").val (); $.Post („Prześlij.php ", nazwa: nazwa, e -mail: e -mail, telefon: telefon, płeć: płeć, funkcja (data) $ ('#wyniki').HTML (dane); $ ('#myform') [0].Resetowanie(); );  

3. Utwórz skrypt PHP

Teraz utwórz skrypt PHP o nazwie składać.php. Ten skrypt wykonuje wszystkie twoje operacje. Po przesłaniu formularza internetowego ten skrypt otrzyma wszystkie argumenty z postu. Możesz dostosować ten skrypt zgodnie z wymaganiami, takimi jak zapisywanie wartości w bazie danych, rekordy e -mail do administratora itp.

"; echo $ _POST ['e -mail'] ."
"; echo $ _POST ['PONEFEL'] ."
"; echo $ _post [„ płeć ''] ."
"; echo" ===============================
„; echo” Wszystkie dane przesłane pomyślnie!"; ?> 

4. Testowanie

Teraz dostęp do indeks.html Strona w przeglądarce internetowej i przetestuj ten przykład. Możesz także obejrzeć to demo.

Wniosek

Formularze AJAX są istotną częścią nowoczesnego tworzenia aplikacji internetowych i mogą być używane do poprawy wrażenia użytkownika poprzez skrócenie czasu wymaganego do przesyłania danych. Technologia formularzy Ajax znacznie się rozwijała w ciągu ostatnich kilku lat, szczególnie wraz z pojawieniem się silniejszych ram JavaScript, które zapewniają dodatkową funkcjonalność i łatwość użytkowania. Należy zauważyć, że korzyści płynące z korzystania z formularza Ajax nie ograniczają się do stron internetowych. W rzeczywistości można zastosować te same pojęcia, aby utworzyć aplikację mobilną z responsywnym interfejsem użytkownika. Dlatego ważne jest, aby zrozumieć podstawy tworzenia formularza Ajax i zalety, które z nim wiążą się.