Mitu korda olete kokku puutunud sellega, et sisestasite valeandmed, mille tõttu leht laadis uuesti ja kustutas väljadele sisestatud märgid täielikult. Selle parandamiseks on kasutajaliidese loomisel üsna populaarne lähenemine ja selle nimi on ajax. Seda kasutatakse paljudes projektides ja seda kasutatakse mitmel viisil.
Ajaxi vormi saatmine: teekide ühendamine
Kaasake jquery teek faili index.php.
Jquery lisamiseks dokumenti on veel üks viis. Peate raamatukogu jquery ametlikult saidilt alla laadima, asetage see õigesse kausta ja kleepige sellele link järgmiselt:
Dokumentide ühendamine ja seadistamine
1. Looge saidiga kausta.php-dokument mis tahes teile sobiva nimega - see saadab ajaxi php-vormi. Sellesse saab kirjutada, millises formaadis sõnumiga tekst kuvatakse. Näiteks vorm1.php.
2. Looge oma JavaScripti failide kaustas.js-fail koosmis tahes mugav nimi. Näiteks form.js.
3. Ühendage see kaust oma dokumendiga.
4. Looge vorm järgmiste parameetritega:
Ärge unustage selles oma andmete sisestamiseks väljasid looma.
5. Minge saidi kataloogis faili form1.php, kuhu kirjutage:
Nüüd, vormi esitamisel, kuvab brauser andmete kohta teavet.
Samasse faili saate kirjutada, mida või kuidas täpselt kuvatakse. Siin saate kirjutada ka tsükleid või algoritme.
Ajax jquery vormi saatmine
1. Loodud form.js faili peate kirjutama koodi, mis vastutab faili toimimise eest pärast saidi lehe täielikku laadimist.
$(document).ready(function(){ //Meie järgmine kood töötab siin });
2. Seejärel peate saatmisnuppu kohandama. Tehke seda kõike samas failis.
$("vorm").submit(function(event) { event.preventDefault(); //siia kirjutatakse järgmine kood });
Koodi esimene osa vastutab lehel elemendi valimise eest ja teine osa vastutab vaiketoimingu vältimise eest.
3. Seejärel esitage näiteks ajaxi vormi esitamine edu kohta.
$.ajax({ tüüp: $(this).attr('method'), url: $(this).attr('tegevus'), andmed: new FormData(this), sisuType: false, cache: false, processData: false, edu: function(result){ alert(result); } });
Järgmine on iga seadistuse üksikasjalik kirjeldus.
- tüüp –seda tüüpi taotlus esitatakse vormis; kuna see maksab POST-i, on päringu tüüp sobiv;
- see - elemendi valik konstruktsiooni sees;
- attr - lühend sõnadest atraktsioon (attraction), see tähendab, et valitud sihtmärgi (vormi) teatud parameeter meelitatakse;
- url – parameeter, mis vastutab selle eest, kuhu päring saadetakse; sel juhul see, mis on kirjutatud vormi parameetrites (form1.php);
- andmed – määrab vormiandmed;
- contentType – vastutab päiste serverisse saatmise eest; sel juhul pole seda vaja;
- vahemälu – vastutab kasutaja vahemälu salvestamise eest;
- processData – vastutab andmete stringiks teisendamise eest;
- success – kuvab eduka andmete esitamise tulemuse; seega, kui andmete saatmine õnnestus, siis funktsiooni toimingud täidetakse.
4. Valmis, nüüd ajaxi vormi esitamisel saate andmeid ilma lehte värskendamata.
Tulemust saab muuta kasutades form1.php faili, kus saab määrata, mis täpselt selle tulemusel kuvatakse. Näiteks
Saate katsetada ja luua kontrolli teatud andmete sisestamise õigsuse kohta: kui andmed pole õiged, siis kuvatakse soovitud teade, vastasel juhul suunab see õigele lehele. Võimalikud on ka paljud muud asjad, mida iganes teie süda ihkab.
Serverisse saadetakse andmeid ka asünkroonselt. See on siis, kui kasutaja sisestab teksti ja see tõstetakse kohe punaselt esile, mis näitab, et sisestatud andmed pole õiged. SellestInternetis on palju käsiraamatuid, kus kõik on selgelt lahti seletatud ja näidetega näidatud.
Järeldus
Kahtlemata on ajax kasulik tööriist veebisaitide koostamisel. Kvaliteetsete lehtede ja liideste tegemiseks on see lihts alt vajalik. Tasub teada, et pildi ja koodis kirjutatu täielikuks mõistmiseks on jQuery tundmine väga oluline, sest lihtne copy-paste ei saa alati aidata ja koodi mõistmist õpetada. Alati tasub meeles pidada, et keeleversioone uuendatakse ja mõned funktsioonid võivad lihts alt kaduda. Seetõttu ei pruugi kõik lahendused olla asjakohased, sageli kirjutatud kood lihts alt ei tööta või ei anna tulemust, mida sooviksite oma ekraanil näha.
