Kuinka monta kertaa olet törmännyt siihen, että annoit virheellisiä tietoja, minkä vuoksi sivu latautui uudelleen ja poisti kenttiin syötetyt merkit kokonaan. Tämän korjaamiseksi on olemassa melko suosittu lähestymistapa käyttöliittymän rakentamiseen, ja sen nimi on ajax. Se näkyy monissa projekteissa ja sitä käytetään monin tavoin.
Ajax-lomakkeen lähettäminen: kirjastojen yhdistäminen
Sisällytä jquery-kirjasto tiedostoon index.php.
On toinenkin tapa sisällyttää jquery asiakirjaan. Sinun on ladattava kirjasto jqueryn viralliselta sivustolta, asetettava se oikeaan kansioon ja liitettävä linkki siihen seuraavasti:
Asiakirjojen liittäminen ja asettaminen
1. Luo.php-dokumentti kansioon sivustolla millä tahansa sinulle sopivalla nimellä - tämä lähettää ajax php -lomakkeen. Siihen voit kirjoittaa, missä muodossa viestin sisältävä teksti näytetään. Esimerkiksi muoto1.php.
2. Luo javascript-tiedostot-kansioon.js-tiedostomikä tahansa kätevä nimi. Esimerkiksi form.js.
3. Yhdistä tämä kansio asiakirjaasi.
4. Luo lomake seuraavilla parametreilla:
Älä unohda luoda siihen kenttiä tietojesi syöttämistä varten.
5. Siirry sivuston hakemistossa olevaan tiedostoon form1.php, johon kirjoita:
Nyt, kun lähetät lomakkeen, selain näyttää tiedot tiedoista.
Samaan tiedostoon voit kirjoittaa, mitä tarkalleen näytetään tai miten. Voit myös kirjoittaa jaksoja tai algoritmeja tähän.
Lähetetään ajax jquery -lomaketta
1. Luotuun form.js-tiedostoon sinun on kirjoitettava koodi, joka on vastuussa tiedoston toimivuudesta sen jälkeen, kun sivusto on latautunut kokonaan.
$(document).ready(function(){ //Seuraava koodimme suoritetaan tässä });
2. Sitten sinun on mukautettava lähetyspainiketta. Tee se kaikki samassa tiedostossa.
$("lomake").submit(function(event) { event.preventDefault(); //seuraava koodi kirjoitetaan tähän });
Koodin ensimmäinen osa vastaa elementin valinnasta sivulla ja toinen osa estää oletustoiminnon.
3. Ota sitten esimerkiksi ajax-lomake onnistumisesta.
$.ajax({ tyyppi: $(this).attr('method'), url: $(this).attr('toiminta'), data: new FormData(this), contentType: false, cache: false, processData: false, menestys: function(tulos){ hälytys(tulos); } });
Seuraavassa on yksityiskohtaiset kuvaukset kustakin asetuksesta.
- tyyppi -tämä on lomakkeessa lähetettävän pyynnön tyyppi; koska se maksaa POST, pyyntötyyppi on sopiva;
- tämä - elementin valinta rakenteen sisällä;
- attr - lyhenne sanoista vetovoima (attraction), eli valitun kohteen (muodon) tietty parametri houkuttelee;
- url - parametri, joka vastaa siitä, minne pyyntö lähetetään; tässä tapauksessa mitä on kirjoitettu lomakeparametreihin (form1.php);
- data - määrittää lomaketiedot;
- contentType - vastaa otsikoiden lähettämisestä palvelimelle; tässä tapauksessa sitä ei tarvita;
- välimuisti - vastaa käyttäjän välimuistin tallentamisesta;
- processData - vastaa tietojen muuntamisesta merkkijonoksi;
- success - näyttää onnistuneen tiedonsiirron tuloksen; siksi, jos tiedon lähetys onnistui, toiminnon toiminnot suoritetaan.
4. Valmis, nyt kun lähetät ajax-lomakkeen, saat tiedot päivittämättä sivua.
Tulosta voidaan muuttaa käyttämällä form1.php-tiedostoa, jossa voit määrittää, mitä tarkalleen tuloksena näytetään. Esimerkiksi
Voit kokeilla ja tehdä tarkistuksen tiettyjen tietojen syöttämisen oikeellisuudesta: jos tiedot eivät ole oikein, haluttu viesti näytetään, muuten se ohjaa oikealle sivulle. Myös monet muut asiat ovat mahdollisia, mitä sydämesi haluaa.
Palvelimelle lähetetään myös tietoja asynkronisesti. Tällöin käyttäjä kirjoittaa tekstiä ja se korostetaan välittömästi punaisella, mikä osoittaa, että syöttämäsi tiedot eivät ole oikein. SiitäInternetissä on monia oppaita, joissa kaikki on selkeästi selitetty ja esitetty esimerkein.
Johtopäätös
Epäilemättä ajax on hyödyllinen työkalu verkkosivustojen rakentamisessa. Laadukkaiden sivujen ja käyttöliittymien tekeminen on yksinkertaisesti välttämätöntä. On syytä huomata, että jQueryn tunteminen on erittäin tärkeää ymmärtääksesi täysin kuvan ja sen, mitä koodissa on kirjoitettu, koska yksinkertainen copy-paste ei aina voi auttaa ja opettaa sinua ymmärtämään koodia. On aina syytä muistaa, että kieliversiot päivitetään ja jotkut ominaisuudet voivat yksinkertaisesti kadota. Siksi kaikki ratkaisut eivät välttämättä ole merkityksellisiä, usein kirjoitettu koodi ei yksinkertaisesti toimi tai se ei tuota tulosta, jonka haluaisit nähdä näytölläsi.
