Ile razy spotkałeś się z faktem, że wprowadziłeś nieprawidłowe dane, z powodu których strona przeładowała się i całkowicie usunęła znaki wpisane w pola. Aby to naprawić, istnieje dość popularne podejście do budowania interfejsu użytkownika, a jego nazwa to ajax. Pojawia się w wielu projektach i jest używany na wiele sposobów.
Wysyłanie formularza ajax: łączenie bibliotek
Dołącz bibliotekę jquery do index.php.
Istnieje inny sposób na dołączenie jquery do dokumentu. Musisz pobrać bibliotekę z oficjalnej strony jquery, umieścić ją w odpowiednim folderze i wkleić do niej link w ten sposób:
Podłączanie i konfigurowanie dokumentów
1. Utwórz dokument.php w folderze z witryną o dowolnej dogodnej dla Ciebie nazwie - będzie to wysyłanie formularza php ajax. W nim możesz napisać, w jakim formacie będzie wyświetlany tekst z wiadomością. Na przykład form1.php.
2. W folderze plików javascript utwórz plik.js za pomocądowolna dogodna nazwa. Na przykład form.js.
3. Połącz ten folder ze swoim dokumentem.
4. Utwórz formularz z następującymi parametrami:
W nim nie zapomnij utworzyć pól do wprowadzania danych.
5. Przejdź do pliku form1.php w katalogu z witryną, w którym wpisz:
Teraz, podczas przesyłania formularza, przeglądarka wyświetli informacje o danych.
W tym samym pliku możesz napisać, co dokładnie będzie wyświetlane lub jak. Tutaj możesz również pisać cykle lub algorytmy.
Wysyłanie formularza ajax jquery
1. W utworzonym pliku form.js należy wpisać kod odpowiedzialny za działanie pliku po pełnym załadowaniu strony serwisu.
$(document).ready(function(){ //Nasz następny kod zostanie uruchomiony tutaj });
2. Następnie musisz dostosować przycisk przesyłania. Zrób to wszystko w tym samym pliku.
$("form").submit(function(event) { event.preventDefault(); //poniższy kod zostanie napisany tutaj });
Pierwsza część kodu odpowiada za wybór elementu na stronie, a druga odpowiada za uniemożliwienie domyślnej akcji.
3. Następnie, na przykład, po pomyślnym przesłaniu formularza ajax.
$.ajax({ type: $(this).attr('metoda'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Poniżej znajdują się szczegółowe opisy każdego ustawienia.
- typ -tego typu żądanie jest składane w formularzu; ponieważ kosztuje to POST, odpowiedni będzie typ żądania;
- this - wybór elementu wewnątrz konstrukcji;
- attr - skrót od przyciągania (przyciągania), czyli przyciągania określonego parametru wybranego celu (formy);
- url - parametr odpowiedzialny za to, gdzie zostanie wysłane żądanie; w tym przypadku, co jest napisane w parametrach formularza (form1.php);
- data - określa dane formularza;
- contentType - odpowiedzialny za wysyłanie nagłówków do serwera; w tym przypadku nie jest to potrzebne;
- cache - odpowiedzialny za zapisywanie pamięci podręcznej użytkownika;
- processData - odpowiedzialny za konwersję danych na ciąg;
- success - wyświetla wynik pomyślnego przesłania danych; w związku z tym, jeśli wysyłanie danych się powiodło, akcje funkcji są wykonywane.
4. Gotowe, teraz przesyłając formularz ajax, otrzymasz dane bez odświeżania strony.
Wynik można zmienić za pomocą pliku form1.php, w którym można określić, co dokładnie zostanie wyświetlone jako wynik. Na przykład
Możesz poeksperymentować i sprawdzić poprawność wprowadzenia pewnych danych: jeśli dane nie są poprawne, wyświetlany jest żądany komunikat, w przeciwnym razie przekierowuje na właściwą stronę. Wiele innych rzeczy jest również możliwych, czegokolwiek zapragnie twoje serce.
Istnieje również wysyłanie danych do serwera asynchronicznie. Dzieje się tak, gdy użytkownik wprowadza tekst i jest on natychmiast podświetlany na czerwono, co oznacza, że wprowadzone dane są nieprawidłowe. O tymistnieje wiele instrukcji w Internecie, gdzie wszystko jest jasno wyjaśnione i pokazane na przykładach.
Wniosek
Niewątpliwie ajax jest przydatnym narzędziem do tworzenia stron internetowych. Aby tworzyć wysokiej jakości strony i interfejsy, jest to po prostu konieczne. Warto zauważyć, że bardzo ważna jest znajomość jQuery, aby w pełni zrozumieć obraz i to, co jest napisane w kodzie, ponieważ proste kopiuj-wklej nie zawsze może pomóc i nauczyć rozumienia kodu. Zawsze warto pamiętać, że wersje językowe są aktualizowane i niektóre funkcje mogą po prostu zniknąć. Dlatego nie wszystkie rozwiązania mogą być odpowiednie, często napisany kod po prostu nie działa lub nie daje rezultatu, który chciałbyś zobaczyć na swoim ekranie.
