Gotovi primjer ajax zahtjeva u čistom javascriptu. JavaScript - Asinkroni AJAX zahtjevi s primjerima. Zahtjev za html podatke pomoću funkcije Load

Pokrili smo osnovnu mehaniku jQuery $.ajax() metode. Sada bi bilo dobro razmotriti slučajeve iz stvarne prakse: kako i odakle možete dobiti podatke za prijenos uz Ajax zahtjev.

Zaprimanje podataka iz obrasca.

Postoji nekoliko načina za dobivanje podataka iz polja obrasca:

  • Odaberite svako polje zasebno, dobivajući njegovu vrijednost. Međutim, to nije baš zgodno kada postoji mnogo polja.
  • Koristite serialize() metodu
  • Koristite metodu serializeArray().

    • Zadržimo se na posljednja dva, a ne toliko na tome kako doći do podataka ( ovdje je sve jednostavno), već o tome kako ih obraditi na strani poslužitelja. Uzmimo, na primjer, ovaj obrazac:

    HTML ( index.html datoteka)

    PUNO IME:
    Email:
    Spol Muško Žensko
    Za primanje pisama:
    Da
    Ne

    I napišimo ovaj JS kod

    jQuery( script.js datoteka)

    $(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), fData = $that.serialize(); / / serijaliziraj podatke // ILI // fData = $that.serializeArray(); $.ajax(( url: $that.attr("action"), // uzmi put do rukovatelja iz atributa tipa akcije: $that.attr( "metoda"), // metoda prijenosa - preuzeta iz podataka atributa metode: (form_data: fData), dataType: "json", uspjeh: function(json)( // Ako je zahtjev uspješno završen. .. if(json)( $that.replaceWith(json); // zamijenite obrazac podacima primljenim u odgovoru ) ));

    Sada napišimo rukovatelj na takav način da jasno vidimo razliku između metoda serialize() i serializeArray()

    PHP rukovatelj ( rukovatelj datotekom.php)


    Robert Sheckly

    potrebno je, osim navođenja nove adrese datoteke - serverAddr ="http://zykov/data.xml", zamijeniti u funkciji

    handleStateChange()

    resp=xmlHttp.responseText;

    resp=xmlHttp.responseXML.getElementsByTagName("ime").firstChild.data;

    Tada umjesto poruke

    Poslužitelj je poslao: Pozdrav, klijente!

    pojavit će se poruka

    Poslužitelj poslao: Robert Sheckly

    AJAX je skupina tehnologija koja se koristi u web razvoju za stvaranje interaktivnih aplikacija. AJAX vam omogućuje prijenos podataka s poslužitelja bez ponovnog učitavanja stranice. Na taj način možete dobiti vrlo impresivne rezultate. A jQuery biblioteka uvelike pojednostavljuje implementaciju AJAX-a pomoću ugrađenih metoda.

    Za implementaciju tehnologije upotrijebite metodu $.ajax ili jQuery.ajax:

    $.ajax(svojstva) ili $.ajax(url [, svojstva])

    Drugi parametar dodan je u verziji 1.5 jQueryja.

    url - adresa tražene stranice;

    svojstva - zahtjev za svojstva.

    Za potpuni popis opcija pogledajte jQuery dokumentaciju.

    U ovom vodiču koristimo nekoliko najčešće korištenih parametara.

    uspjeh (funkcija) - ova funkcija se poziva nakon što je zahtjev uspješno završen. Funkcija prima od 1 do 3 parametra (ovisno o verziji korištene biblioteke). Ali prvi parametar uvijek sadrži podatke vraćene s poslužitelja.

    podaci (objekt/string) - korisnički podaci koji se prosljeđuju traženoj stranici.

    dataType (string) - moguće vrijednosti: xml, json, skripta ili html. Opis vrste podataka koji se očekuju u odgovoru poslužitelja.

    tip (string) - vrsta zahtjeva. Moguće vrijednosti: GET ili POST. Zadano: GET.

    url (string) - URL za zahtjev.

    Primjer 1

    Jednostavan prijenos teksta.

    $.ajax(( url: "response.php?action=sample1", uspjeh: funkcija(podaci) ( $(".rezultati").html(podaci); ) ));

    Za odgovor postoji element .result div.

    Čekati odgovor

    Poslužitelj jednostavno vraća niz:

    Echo "Primjer 1 - prijenos uspješno dovršen";

    Primjer 2

    Korisničke podatke prosljeđujemo PHP skripti.

    $.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data)( $(".results").html( podaci);

    Poslužitelj vraća niz s umetnutim prenesenim podacima:

    Echo "Primjer 2 - prijenos uspješno završen. Parametri: name = " . $_POST["ime"] . ", nadimak= " . $_POST["nadimak"];

    Primjer 3

    Prosljeđivanje i izvršavanje JavaScript koda

    $.ajax(( dataType: "script", url: "response.php?action=sample3", ))

    Poslužitelj izvršava kod:

    Echo "$(".results").html("Primjer 3 - Izvršavanje JavaScripta");";

    Primjer 4

    Koristimo XML. Primjer se može koristiti za rad s vanjskim XML-om, na primjer, RSS feed.

    $.ajax(( dataType: "xml", url: "response.php?action=sample4", uspjeh: funkcija(xmldata)( $(".results").html(""); $(xmldata).find ("stavka").each(function())( $(" ").html($(this).text()).appendTo(".results"); ) ));

    Poslužitelj bi trebao vratiti XML kod:

    Header("Content-Type: application/xml; charset=UTF-8"); jeka

    POVEZANI ČLANCI