Inatuma fomu ya Ajax kwa seva kwa kutumia jQuery

Orodha ya maudhui:

Inatuma fomu ya Ajax kwa seva kwa kutumia jQuery
Inatuma fomu ya Ajax kwa seva kwa kutumia jQuery
Anonim

Ni mara ngapi umekumbana na ukweli kwamba uliingiza data isiyo sahihi, kwa sababu hiyo ukurasa ulipakia upya na kufuta kabisa herufi zilizoingizwa kwenye sehemu. Ili kurekebisha hili, kuna mbinu maarufu ya kujenga kiolesura cha mtumiaji, na jina lake ni ajax. Inaonekana katika miradi mingi na inatumika kwa njia nyingi.

Kutuma fomu ya ajax: kuunganisha maktaba

Jumuisha maktaba ya jQuery katika index.php.


Kuna njia nyingine ya kujumuisha jQuery kwenye hati. Unahitaji kupakua maktaba kutoka kwa tovuti rasmi ya jQuery, kuiweka kwenye folda sahihi na ubandike kiungo kwake kama hii:


Kuunganisha na kusanidi hati

1. Unda hati ya.php kwenye folda yenye tovuti yenye jina lolote linalokufaa - hii itakuwa inatuma fomu ya ajax php. Ndani yake unaweza kuandika katika muundo gani maandishi yenye ujumbe yataonyeshwa. Kwa mfano, form1.php.

Folda ya tovuti
Folda ya tovuti

2. Katika folda yako ya faili za javascript, unda faili ya.js najina lolote linalofaa. Kwa mfano, form.js.

js folda
js folda

3. Unganisha folda hii kwenye hati yako.


4. Unda fomu yenye vigezo vifuatavyo:


Ndani yake, usisahau kuunda sehemu za kuingiza data yako.

5. Nenda kwa faili form1.php kwenye saraka na tovuti, ambayo andika:

Sasa, wakati wa kuwasilisha fomu, kivinjari kitaonyesha maelezo kuhusu data.

Katika faili sawa, unaweza kuandika ni nini hasa kitaonyeshwa au jinsi gani. Unaweza pia kuandika mizunguko au algoriti hapa.

Kutuma fomu ya jQuery ya ajax

1. Katika faili iliyoundwa ya form.js, unahitaji kuandika msimbo ambao unawajibika kufanya faili ifanye kazi baada ya ukurasa wa tovuti kupakiwa kikamilifu.


$(hati).ready(function(){ //Nambari yetu inayofuata itatumika hapa });

2. Kisha unahitaji kubinafsisha kitufe cha kuwasilisha. Fanya yote katika faili moja.


$("fomu").wasilisha(function(tukio) { event.preventDefault(); //msimbo ufuatao utaandikwa hapa });

Sehemu ya kwanza ya msimbo ina jukumu la kuchagua kipengele kwenye ukurasa, na ya pili ina jukumu la kuzuia kitendo chaguomsingi.

3. Kisha, kwa mfano, wasilisha fomu ya ajax kuhusu mafanikio.


$.ajax({aina: $(this).attr('njia'), url: $(this).attr('action'), data: new FormData(hii), contentType: uongo, kache: uongo, processData: uongo, mafanikio: function(result){ alert(matokeo); } });

Yafuatayo ni maelezo ya kina ya kila mpangilio.

  • aina -hii ndiyo aina ya ombi linalowasilishwa kwa fomu; kwa kuwa inagharimu POST, aina ya ombi itafaa;
  • hii - uteuzi wa kipengele ndani ya muundo;
  • attr - kifupi cha kivutio (kivutio), yaani, kigezo fulani cha lengo (fomu) iliyochaguliwa inavutiwa;
  • url - kigezo kinachohusika na mahali ombi litatumwa; katika kesi hii, ni nini kilichoandikwa katika vigezo vya fomu (form1.php);
  • data - hubainisha data ya fomu;
  • contentType - inawajibika kwa kutuma vichwa kwa seva; katika kesi hii haihitajiki;
  • kache - kuwajibika kwa kuhifadhi akiba ya mtumiaji;
  • processData - kuwajibika kwa kubadilisha data kuwa mfuatano;
  • mafanikio - huonyesha matokeo ya uwasilishaji wa data uliofaulu; kwa hivyo, ikiwa kutuma data kulifaulu, basi vitendo vya chaguo la kukokotoa hutekelezwa.

4. Umemaliza, sasa unapowasilisha fomu ya ajax, utapokea data bila kuonyesha upya ukurasa.

Matokeo yanaweza kubadilishwa kwa kutumia faili ya form1.php, ambapo unaweza kubainisha ni nini hasa kitakachoonyeshwa kama matokeo. Kwa mfano, Unaweza kujaribu na kuunda hakiki ya usahihi wa kuingiza data fulani: ikiwa data si sahihi, basi ujumbe unaohitajika utaonyeshwa, vinginevyo utaelekezwa kwenye ukurasa sahihi. Mambo mengine mengi yanawezekana, cho chote ambacho moyo wako unatamani.

ajax mfano
ajax mfano

Pia kuna kutuma data kwa seva kwa njia iliyosawazishwa. Huu ndio wakati mtumiaji anaingia maandishi, na mara moja huonyeshwa kwa rangi nyekundu, kuonyesha kwamba data iliyoingia si sahihi. Kuhusu hilokuna miongozo mingi kwenye Mtandao, ambapo kila kitu kinafafanuliwa kwa uwazi na kuonyeshwa kwa mifano.

Hitimisho

Bila shaka, ajax ni zana muhimu katika ujenzi wa tovuti. Ili kutengeneza kurasa za hali ya juu na miingiliano, ni muhimu tu. Ni muhimu kuzingatia kwamba ni muhimu sana kujua jQuery kuelewa kikamilifu picha na kile kilichoandikwa katika kanuni, kwa sababu nakala rahisi ya kuweka haiwezi kukusaidia kila wakati na kukufundisha kuelewa kanuni. Inafaa kukumbuka kuwa matoleo ya lugha yanasasishwa na baadhi ya vipengele vinaweza kutoweka. Kwa hivyo, si masuluhisho yote yanaweza kuwa muhimu, mara nyingi msimbo ulioandikwa haufanyi kazi au hautoi matokeo ambayo ungependa kuona kwenye skrini yako.

Ilipendekeza: