Olemme käsitelleet jQuery $.ajax() -menetelmän perusmekaniikkaa. Nyt olisi hyvä pohtia tapauksia tosikäytännöstä: miten ja mistä voi saada dataa lähetettäväksi Ajax-pyynnöllä.

Tietojen vastaanottaminen lomakkeesta.

On olemassa useita tapoja saada tietoja lomakekentistä:

Valitse jokainen kenttä erikseen saadaksesi sen arvon. Tämä ei kuitenkaan ole kovin kätevää, kun kenttiä on useita.

Käytä serialize()-menetelmää

Käytä serializeArray()-menetelmää

Pysähdytään kahteen viimeiseen eikä niinkään siihen, miten tietoja saadaan ( täällä kaikki on yksinkertaista), mutta miten niitä käsitellään palvelinpuolella. Otetaan esimerkiksi tämä lomake:

HTML ( index.html-tiedosto)

KOKO NIMI:
Sähköposti:
Sukupuoli Mies Nainen
Kirjeiden vastaanottaminen:
Joo
Ei

Ja kirjoitetaan tämä JS-koodi

jQuery ( script.js-tiedosto)

$(function())( $("#oma_lomake").on("lähetä", function(e)( e.preventDefault(); var $that = $(this), fData = $that.serialize(); / / sarjoittaa tiedot // TAI // fData = $that.serializeArray(); $that.attr( "method"), // siirtomenetelmä - otettu menetelmän määritteen tiedoista: (form_data: fData), dataType: "json", menestys: function(json)( // Jos pyyntö on suoritettu onnistuneesti. .. if(json)( $that.replaceWith(json); // korvaa lomake vastauksessa saaduilla tiedoilla ) ));

kirjoitetaan nyt käsittelijä siten, että näet selvästi eron serialize()- ja serializeArray()-menetelmien välillä

PHP-käsittelijä ( tiedostokäsittelijä.php)

Robert Sheckly

sen lisäksi, että määritetään uusi tiedostoosoite - serverAddr ="http://zykov/data.xml" on korvattava funktiossa

handleStateChange()

resp=xmlHttp.responseText;

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

Sitten viestin sijaan

Palvelin lähetti: Hei asiakas!

viesti tulee näkyviin

Palvelimen lähettäjä: Robert Sheckly

AJAX on joukko teknologioita, joita käytetään verkkokehityksessä interaktiivisten sovellusten luomiseen. AJAXin avulla voit siirtää tietoja palvelimelta lataamatta sivua uudelleen. Tällä tavalla voit saada erittäin vaikuttavia tuloksia. Ja jQuery-kirjasto yksinkertaistaa huomattavasti AJAXin käyttöönottoa sisäänrakennetuilla menetelmillä.

Ota tekniikka käyttöön käyttämällä $.ajax- tai jQuery.ajax-menetelmää:

$.ajax(ominaisuudet) tai $.ajax(url [, ominaisuudet])

Toinen parametri lisättiin jQueryn versioon 1.5.

url - pyydetyn sivun osoite;

ominaisuudet - pyydä ominaisuuksia.

Täydellinen luettelo vaihtoehdoista on jQueryn ohjeissa.

Tässä opetusohjelmassa käytämme useita yleisimmin käytettyjä parametreja.

menestys (toiminto) - tämä toiminto kutsutaan, kun pyyntö on suoritettu onnistuneesti. Funktio vastaanottaa 1 - 3 parametria (käytetyn kirjaston versiosta riippuen). Mutta ensimmäinen parametri sisältää aina palvelimelta palautetut tiedot.

tiedot (objekti/merkkijono) - käyttäjätiedot, jotka välitetään pyydetylle sivulle.

dataType (merkkijono) - mahdolliset arvot: xml, json, script tai html. Kuvaus tietotyypeistä, joita odotetaan palvelimen vastauksessa.

tyyppi (merkkijono) - pyyntötyyppi. Mahdolliset arvot: GET tai POST. Oletus: GET.

url (merkkijono) - pyynnön URL-osoite.

Esimerkki 1

Helppo tekstin siirto.

$.ajax(( url: "response.php?action=sample1", menestys: function(data) ( $(.results").html(data); ) ));

Vastauksessa on .result div -elementti.

Vastausta odotellen

Palvelin yksinkertaisesti palauttaa merkkijonon:

Echo "Esimerkki 1 - siirto suoritettu onnistuneesti";

Esimerkki 2

Välitämme käyttäjätiedot PHP-skriptille.

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

Palvelin palauttaa merkkijonon, johon on lisätty lähetetyt tiedot:

Echo "Esimerkki 2 - siirto suoritettu onnistuneesti. Parametrit: name = " . $_POST["nimi"] . ", lempinimi= ". $_POST["lempinimi"];

Esimerkki 3

JavaScript-koodin välittäminen ja suorittaminen

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

Palvelin suorittaa koodin:

Echo "$(".results").html("Esimerkki 3 - JavaScriptin suorittaminen");";

Esimerkki 4

Käytämme XML:ää. Esimerkkiä voidaan käyttää ulkoisen XML:n, esimerkiksi RSS-syötteen, kanssa työskentelyyn.

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

Palvelimen pitäisi palauttaa XML-koodi:

Header("Sisältötyyppi: application/xml; charset=UTF-8"); kaiku