Ilang beses mo nang naranasan ang katotohanang maling data ang nailagay mo, dahil dito nag-reload ang page at ganap na natanggal ang mga character na inilagay sa mga field. Upang ayusin ito, mayroong isang medyo popular na diskarte sa pagbuo ng isang user interface, at ang pangalan nito ay ajax. Lumilitaw ito sa maraming proyekto at ginagamit sa maraming paraan.
Pagpapadala ng ajax form: pagkonekta ng mga library
Isama ang jquery library sa index.php.
May isa pang paraan upang maisama ang jquery sa isang dokumento. Kailangan mong i-download ang library mula sa opisyal na site ng jquery, ilagay ito sa tamang folder at i-paste ang link dito tulad nito:
Pagkonekta at pag-set up ng mga dokumento
1. Lumikha ng isang.php na dokumento sa folder na may site na may anumang pangalan na maginhawa para sa iyo - ito ay magpapadala ng ajax php form. Dito maaari kang sumulat sa kung anong format ang ipapakita ng teksto na may mensahe. Halimbawa, form1.php.
2. Sa iyong folder ng javascript files, gumawa ng.js file gamit anganumang maginhawang pangalan. Halimbawa, form.js.
3. Ikonekta ang folder na ito sa iyong dokumento.
4. Gumawa ng form na may mga sumusunod na parameter:
Sa loob nito, huwag kalimutang gumawa ng mga field para sa paglalagay ng iyong data.
5. Pumunta sa file form1.php sa direktoryo na may site, kung saan isulat ang:
Ngayon, kapag isinumite ang form, magpapakita ang browser ng impormasyon tungkol sa data.
Sa parehong file, maaari mong isulat kung ano ang eksaktong ipapakita o kung paano. Maaari ka ring magsulat ng mga cycle o algorithm dito.
Pagpapadala ng ajax jquery form
1. Sa ginawang form.js file, kailangan mong isulat ang code na responsable sa pagpapagana ng file pagkatapos ganap na ma-load ang page ng site.
$(dokumento).ready(function(){ //Ang aming susunod na code ay tatakbo dito });
2. Pagkatapos ay kailangan mong i-customize ang button na isumite. Gawin ang lahat sa iisang file.
$("form").submit(function(event) { event.preventDefault(); //ang sumusunod na code ay isusulat dito });
Ang unang bahagi ng code ay responsable para sa pagpili ng elemento sa page, at ang pangalawa ay responsable sa pagpigil sa default na pagkilos.
3. Pagkatapos, halimbawa, kumuha ng isang ajax form na pagsusumite sa tagumpay.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Ang mga sumusunod ay mga detalyadong paglalarawan ng bawat setting.
- type -ito ang uri ng kahilingan na isinumite sa form; dahil nagkakahalaga ito ng POST, magiging angkop ang uri ng kahilingan;
- this - pagpili ng elemento sa loob ng construct;
- attr - maikli para sa atraksyon (attraction), ibig sabihin, naaakit ang isang partikular na parameter ng napiling target (form);
- url - parameter na responsable para sa kung saan ipapadala ang kahilingan; sa kasong ito, kung ano ang nakasulat sa mga parameter ng form (form1.php);
- data - tumutukoy sa data ng form;
- contentType - responsable sa pagpapadala ng mga header sa server; sa kasong ito, hindi ito kailangan;
- cache - responsable sa pag-save ng cache ng user;
- processData - responsable sa pag-convert ng data sa isang string;
- success - ipinapakita ang resulta ng matagumpay na pagsusumite ng data; samakatuwid, kung matagumpay ang pagpapadala ng data, ang mga aksyon ng function ay isasagawa.
4. Tapos na, ngayon kapag isinumite ang ajax form, makakatanggap ka ng data nang hindi nire-refresh ang page.
Maaaring baguhin ang resulta gamit ang form1.php file, kung saan matutukoy mo kung ano ang eksaktong ipapakita bilang resulta. Halimbawa, Maaari kang mag-eksperimento at gumawa ng tseke para sa kawastuhan ng pagpasok ng ilang partikular na data: kung hindi tama ang data, ipapakita ang nais na mensahe, kung hindi ay magre-redirect ito sa tamang pahina. Marami pang bagay ang posible, anuman ang naisin ng iyong puso.
May pagpapadala din ng data sa server nang asynchronous. Ito ay kapag ang gumagamit ay nagpasok ng teksto, at ito ay agad na naka-highlight sa pula, na nagpapahiwatig na ang inilagay na data ay hindi tama. Tungkol doonmaraming mga manual sa Internet, kung saan ang lahat ay malinaw na ipinaliwanag at ipinapakita kasama ng mga halimbawa.
Konklusyon
Walang alinlangan, ang ajax ay isang kapaki-pakinabang na tool sa pagbuo ng website. Upang makagawa ng mga de-kalidad na page at interface, kailangan lang. Kapansin-pansin na napakahalagang malaman ang jQuery upang lubos na maunawaan ang larawan at kung ano ang nakasulat sa code, dahil ang isang simpleng copy-paste ay hindi palaging makakatulong at magturo sa iyo na maunawaan ang code. Ito ay palaging nagkakahalaga ng pag-alala na ang mga bersyon ng wika ay na-update at ang ilang mga tampok ay maaaring mawala lamang. Samakatuwid, hindi lahat ng solusyon ay maaaring may kaugnayan, kadalasan ang nakasulat na code ay hindi gumagana o hindi gumagawa ng resulta na gusto mong makita sa iyong screen.
