Wyślij formularz ajax do serwera za pomocą jquery

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

Podłączenie biblioteki jquery do index.php.



& 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; script async = „//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> ;
& 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:

Związek ;! - form1.php Plik ten tworzy w folderze sayta- - & gt;




W nim nie zapomnij utworzyć pól do wprowadzania danych.

& lt; script async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& 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.
Istnieje również asynchroniczne wysyłanie danych do serwera. Dzieje się tak, gdy użytkownik wprowadza tekst, a on jest od razu podświetlony na czerwonow kolorze, stwierdzając, że wprowadzone dane są nieprawidłowe. W Internecie jest wiele podręczników, w których wszystko jest dokładnie wyjaśnione i pokazane w przykładach.

Wniosek

Bez wątpienia ajax jest użytecznym narzędziem do tworzenia witryn. Aby tworzyć wysokiej jakości strony i interfejsy, jest to po prostu konieczne. Warto zauważyć, że bardzo ważne jest, aby znać jquery, aby zrozumieć pełny obraz tego, co jest napisane w kodzie, ponieważ zwykła kopia-wklej nie zawsze może pomóc i nauczyć cię zrozumienia kodu. Zawsze warto pamiętać, że wersje językowe są aktualizowane, a niektóre funkcje mogą po prostu zniknąć. Dlatego nie wszystkie rozwiązania mogą być rzeczywiste, najczęściej napisany kod po prostu nie działa lub nie daje wyniku, który chciałbym zobaczyć na moim ekranie.

Powiązane publikacje