Tumeshughulikia ufundi msingi wa mbinu ya jQuery $.ajax(). Sasa itakuwa ni wazo nzuri kuzingatia kesi kutoka kwa mazoezi halisi: jinsi na kutoka wapi unaweza kupata data kwa ajili ya maambukizi na ombi la Ajax.

Kupokea data kutoka kwa fomu.

Kuna njia kadhaa za kupata data kutoka kwa sehemu za fomu:

Chagua kila sehemu kando, ukipata thamani yake. Hata hivyo, hii si rahisi sana wakati kuna mashamba mengi.

Tumia njia ya kuratibu ()

Tumia njia ya serializeArray().

Wacha tuzingatie mbili za mwisho na sio sana jinsi ya kupata data ( kila kitu ni rahisi hapa), lakini juu ya jinsi ya kuzichakata kwa upande wa seva. Chukua, kwa mfano, fomu hii:

HTML ( index.html faili)

JINA KAMILI:
Barua pepe:
Jinsia Mwanaume Mwanamke
Ili kupokea barua:
Ndiyo
Hapana

Na hebu tuandike nambari hii ya JS

jQuery( script.js faili)

$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(hii), fData = $that.serialize(); / / kusawazisha data // AU // fData = $that.serializeArray(); $.ajax(( url: $that.attr("action"), // chukua njia ya kidhibiti kutoka kwa sifa ya aina ya kitendo: $that.attr("njia"), // njia ya kuhamisha - iliyochukuliwa kutoka kwa data ya sifa ya mbinu: (form_data: fData), dataType: "json", success: function(json)( // Ikiwa ombi limekamilika kwa mafanikio. .. if(json)( $that.replaceWith(json); // badilisha fomu na data iliyopokelewa kwenye jibu. ) ) )); ));

Sasa wacha tuandike kidhibiti kwa njia ya kuona wazi tofauti kati ya njia za serialize() na serializeArray()

Kidhibiti cha PHP ( faili handler.php)

Robert Sheckly

ni muhimu, pamoja na kutaja anwani mpya ya faili - serverAddr = "http://zykov/data.xml", kubadilishwa katika kazi

handleStateChange()

resp=xmlHttp.responseText;

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

Kisha badala ya ujumbe

Seva ilituma: Habari, mteja!

ujumbe utaonekana

Seva iliyowasilishwa na: Robert Sheckly

AJAX ni kundi la teknolojia zinazotumika katika ukuzaji wa wavuti kuunda programu ingiliani. AJAX hukuruhusu kuhamisha data kutoka kwa seva bila kupakia upya ukurasa. Kwa njia hii unaweza kupata matokeo ya kuvutia sana. Na maktaba ya jQuery hurahisisha sana utekelezaji wa AJAX kwa kutumia njia zilizojumuishwa.

Ili kutekeleza teknolojia, tumia mbinu ya $.ajax au jQuery.ajax:

$.ajax(sifa) au $.ajax(url [, sifa])

Kigezo cha pili kiliongezwa katika toleo la 1.5 la jQuery.

url - anwani ya ukurasa ulioombwa;

mali - ombi mali.

Kwa orodha kamili ya chaguzi, angalia hati za jQuery.

Katika somo hili tunatumia vigezo kadhaa vinavyotumika sana.

mafanikio (kazi) - kazi hii inaitwa baada ya ombi kukamilika kwa mafanikio. Kazi inapokea kutoka kwa vigezo 1 hadi 3 (kulingana na toleo la maktaba iliyotumiwa). Lakini parameta ya kwanza daima ina data iliyorejeshwa kutoka kwa seva.

data (kitu/kamba) - data ya mtumiaji ambayo hupitishwa kwa ukurasa ulioombwa.

DataType (kamba) - thamani zinazowezekana: xml, json, hati au html. Maelezo ya aina ya data inayotarajiwa katika jibu la seva.

aina (kamba) - aina ya ombi. Thamani zinazowezekana: GET au POST. Chaguomsingi: PATA.

url (kamba) - URL ya ombi.

Mfano 1

Uhamisho rahisi wa maandishi.

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

Kuna kipengele cha .result div kwa jibu.

Kusubiri jibu

Seva inarudisha tu kamba:

Echo "Mfano wa 1 - uhamisho umekamilika kwa mafanikio";

Mfano 2

Tunapitisha data ya mtumiaji kwa hati ya PHP.

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

Seva inarudisha kamba iliyo na data iliyopitishwa iliyoingizwa ndani yake:

Echo "Mfano wa 2 - uhamisho umekamilika kwa ufanisi. Vigezo: jina = " . $_POST["jina"] . ", jina la utani= " . $_POST["jina la utani"];

Mfano 3

Kupitisha na kutekeleza Msimbo wa JavaScript

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

Seva hutekeleza nambari:

Echo "$(".matokeo").html("Mfano wa 3 - Utekelezaji wa JavaScript");";

Mfano 4

Tunatumia XML. Mfano unaweza kutumika kufanya kazi na XML ya nje, kwa mfano, malisho ya RSS.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", mafanikio: function(xmldata)( $(".matokeo").html(""); $(xmldata).find ("kipengee").kila(kazi())( $(" ").html($(hii).maandishi()).appendTo(".matokeo");));)));

Seva inapaswa kurudisha nambari ya XML:

Kichwa("Aina ya Maudhui: application/xml; charset=UTF-8"); mwangwi