Internet » Pošlji obrazec ajax strežniku z uporabo jquery

Pošlji obrazec ajax strežniku z uporabo jquery

Internet

Kolikokrat ste naleteli na napačen vnos podatkov, zaradi katerega se je stran znova zagnala in popolnoma odpravila vnesene znake v polja. Če želite popraviti to, obstaja zelo priljubljen pristop k izgradnji uporabniškega vmesnika, njegovo ime pa je ajax. Najdemo ga v številnih projektih in uporabljamo na več načinov.

Pošiljanje obrazca ajax: povezovalne knjižnice

Povežite jquery knjižnico z index.php.



& lt; skript type = "text /javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">

Obstaja še en način, da se jquery vključi v dokument. Knjižnico morate prenesti z uradnega spletnega mesta jquery, jo umestiti v ustrezno mapo in povezavo nanj prilepiti na enak način:

& lt; ;
& lt ;! - fb_336x280_mid - & gt;

& lt; skript & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

Povezava in konfiguracija dokumentov

1. Ustvarite dokument formata v mapi z mestom. php s katerim koli imenom, ki je za vas primerno - to bo pošiljanje ajax php obrazca. V njem lahko napišete, v katerem formatu bo prikazano besedilo s sporočilom. Na primer, form1.php.

2. V mapi javascript datoteke, ustvarite. Na primer form.js

3. To mapo povežite z dokumentom.



& lt; skript type = "text /javascript" src = "/js /form.js" & gt;

4. Ustvarite obrazec z naslednjimi parametri: 

& lt ;! - form1.php je datoteka obrazca v mapi mesta - - & gt;

V njem ne pozabite ustvariti polj za vnos podatkov.

& lt; skript async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_2 - & gt;

& lt; skript & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

5. Odprite datoteko form1.php v imeniku s stranjo, na katero pišete:

Zdaj, ko pošiljate obrazec, bo brskalnik prikazal podatke o podatkih .

V isti datoteki lahko napišete, kaj bo prikazano ali kako. Tukaj lahko napišete cikle ali algoritme.

Pošiljanje obrazca za ajax jquery

1. V ustvarjeni datoteki form.js morate napisati kodo, ki je odgovorna za zagotovitev, da se datoteka zažene po tem, ko je stran v celoti naložila stran.

$ (document) .ready (funkcija () {
 //Tukaj je naša naslednja koda 
});

2. Nato izberite gumb za pošiljanje. Naredite vse v isti datoteki.

$ ("form") submit (funkcija (dogodek) {
 event.preventDefault ();
//tukaj bo napisana naslednja koda 
});

Prvi del kode je odgovoren za izbiro postavke na strani in drugo za preprečitev privzetega dejanja.

3. Nato na primer pošljite obliko ajax z uspešnim pošiljanjem podatkov.

$ .ajax ({
 type: $ (this) .attr ('method'),
url: $ (this) .attr ('action'),
) datum: new FormData (this),
contentType: false,
cache: false,
processdata: false, 

success: function (result) {
 opozorilo (rezultat) 
} 
});

Spodaj je podrobno obravnavana vsaka nastavitev.

  • vrsta - vrsta zahtevka, ki se pošlje v pisni obliki; ker je POST, bo vrsta zahtevka ustrezna;
  • to - izbira elementa znotraj modela;
  • attr - skrajšano odprivlačnost, tj. določen parameter izbranega cilja (oblike);
  • url - parameter, ki je odgovoren za pošiljanje zahteve; v tem primeru - kaj je zapisano v parametrih obrazca (form1.php);
  • data - določa podatke obrazca;
  • contentType - odgovoren za pošiljanje glave strežniku; v tem primeru se ne zahteva;
  • Predpomnilnik - je odgovoren za shranjevanje predpomnilnika od uporabnika;
  • processData - odgovoren za pretvorbo podatkov v niz;
  • uspeh - prikaže rezultat uspešnega pošiljanja podatkov; če je bilo pošiljanje podatkov uspešno, se izvedejo funkcije funkcije.

4. Konec, ko pošljete ajax obrazce, boste prejeli podatke brez posodobitve strani.


& lt; skript type = "text /javascript" & gt;
lahko blockSettings2 = {blockId: "R-A-271049-5", renderTo: "yandex_rtb_R-A-70350-39", async:! 0};
if (document.cookie.indexOf ("abmatch ="))> = 0) blockSettings2.statId = 70350;
Funkcija (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (funkcija () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("script") , d = b.createElement ("script"), d.type = "text /javascript", d.src = "//an.yandex .ru /system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (ta, ta.dokument," yandexContextAsyncCallbacks ");

Rezultat lahko spremenite z uporabo datoteke form1.php, kjer lahko določite, kaj bo točno prikazano kot rezultat. Na primer, 

 

Preizkusite in ustvarite preverjanje pravilnosti vnosa določenih podatkov: če so podatki napačni, se prikaže sporočilo ali pa se drugače preusmeri na stran. . Obstaja tudi veliko več, kar vaša duša želi. 



Na strežnik je tudi asinhrono pošiljanje podatkov. To je, ko uporabnik vnese besedilo in je takoj označen z rdečo barvov barvi, ki navaja, da so vneseni podatki napačni. O tem je na internetu veliko priročnikov, kjer je vse jasno razloženo in prikazano v primerih.
Zaključek



Ajax je nedvomno uporabno orodje pri ustvarjanju spletnih mest. Za kakovostne strani in vmesnike je to potrebno. Pomembno je omeniti, da je zelo pomembno poznati jquery, da bi razumeli celotno sliko tega, kar je zapisano v kodi, saj preprosto kopiranje ne more vedno pomagati in vas naučiti razumevanja kode. Vedno se je treba spomniti, da se jezikovne različice posodabljajo, nekatere funkcije pa lahko preprosto izginejo. Zato vse rešitve ne morejo biti dejanske, najpogosteje napisane kode ne delujejo ali pa ne dajejo rezultata, ki bi ga rad videl na mojem zaslonu. 






















Sorodne publikacije