Ile razy napotkano nieprawidłowe wprowadzanie danych, które spowodowało ponowne uruchomienie strony i całkowicie wyeliminowało znaki wprowadzone w polach. Aby to naprawić, istnieje bardzo popularne podejście do budowania interfejsu użytkownika, a jego nazwa to ajax. Znajduje się w wielu projektach i jest używany na wiele sposobów.
Wysyłanie formularza ajaxowego: łączenie bibliotek
& lt; script type = "text /javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
Istnieje inny sposób dołączania jquery do dokumentu. Należy pobrać bibliotekę z oficjalnej strony jQuery, umieścić go w folderze i wklej link do niego tak:
& lt ;! - fb_336x280_mid - & gt;
& lt; skrypt & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
Połączenie i konfiguracja dokumentów
1. Utwórz dokument formatu w folderze ze stroną. php z dowolną nazwą wygodną dla ciebie - to będzie 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 z dowolną wygodną nazwą. Na przykład form.js
3. Połącz ten folder z dokumentem.
Związek pośredni scenariusz type = "text /JavaScript" src = "/js /form.js" & gt;
,
4. Wytworzyć następujące parametry:
W nim nie zapomnij utworzyć pól do wprowadzania danych.
& lt ;! - fb_336x280_2 - & gt;
& lt; skrypt & gt; (adsbygoogle = window.adsbygoogle || []). push ({});
5. Otwórz plik form1.php w katalogu z witryną, do której piszesz:
Teraz, wysyłając formularz, przeglądarka wyświetli informacje o danych .
W tym samym pliku możesz napisać, co będzie wyświetlane i jak. Tutaj możesz pisać cykle lub algorytmy.
Wysyłanie formularza jQuery ajax
1. W utworzonym pliku form.js należy napisać kod odpowiedzialny za to, aby plik działał po pełnym załadowaniu strony.
$ (dokument) .ready (function () {
//Oto nasz następny kod
});
2. Następnie należy wybrać przycisk wysyłania. Zrób to wszystko w tym samym pliku.
$ ("formularz") submit (funkcja (zdarzenie) {
event.preventDefault ();
//poniższy kod zostanie zapisany tutaj
});
Pierwsza część kodu jest odpowiedzialna za wybór pozycji na stronie, a drugiej za zapobieganie domyślnemu działaniu.
3. Następnie na przykład wyślij formularz ajax z pomyślnym wysłaniem danych.
$ .ajax ({
type: $ (this) .attr ('method'),
url: $ (this) .attr ('action'),
) date: new FormData (this),
contentType: false,
cache: false,
processdata: false,
sukces: funkcja (wynik) {
alert (wynik)
}
});
Poniżej, każde ustawienie jest szczegółowo rozpatrywane.
- typ - rodzaj wniosku, który jest wysyłany na piśmie; ponieważ jest to POST, typ zapytania będzie odpowiedni;
- to - wybór elementu wewnątrz projektu;
- attr - skrót odatrakcyjność, tzn. bierze się pod uwagę pewien parametr wybranego celu (formy);
- url - parametr, który odpowiada za to, gdzie zostanie wysłany wniosek; w tym przypadku - co jest napisane w parametrach formularza (form1.php);
- dane - określa dane formularza;
- contentType - odpowiedzialny za wysyłanie nagłówków do serwera; w tym przypadku nie jest wymagane;
- cache - odpowiada za przechowywanie pamięci podręcznej od użytkownika;
- processData - odpowiedzialna za konwersję danych na ciąg;
- success - wyświetla wynik pomyślnego wysłania danych; więc jeśli wysyłanie danych zakończyło się powodzeniem, wówczas funkcje tej funkcji są wykonywane. ,
4. Zakończ, teraz, gdy wysyłasz formularze ajax, otrzymasz dane bez aktualizacji strony.
Związek pośredni typu skrypt = "text /JavaScript" & gt;
var blockSettings2 = {blockID "R-A-271049-5" renderTo "yandex_rtb_R-A-70350-39" asynchroniczny :! 0};
czy (document.cookie.indexOf ("abmatch =") i GT = 0) blockSettings2.statId = 70350;
! Zastosowanie (a, b, c, d, e) {A [c] = A [c] || [] A [c] .Push (funkcja () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("scenariusz")d = b.createElement ("scenariusz") d.type = "text /JavaScript" d.src = „//an.yandex .ru /System /context.js "d.async = 0e.parentNode.insertBefore (d, e)} (to this.document," yandexContextAsyncCallbacks „);
W rezultacie mogą być zmieniane za pomocą form1.php, w którym można określić, co będzie emitowany w wyniku. Na przykład
Można eksperymentować i tworzyć na sprawdzenie pisowni niektórych danych, jeśli dane nie są prawidłowe, pojawi się komunikat, w przeciwnym razie - przekierowuje do strony . Jest też o wiele więcej, czego chce twoja dusza.