Lisää
jQuery Ajax POST esimerkki PHP:llä
Yritän lähettää tietoja lomakkeelta tietokantaan. Tässä on käyttämäni lomake:
<form name="foo" action="form.php" method="POST" id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
Tyypillinen lähestymistapa olisi lähettää lomake, mutta tämä aiheuttaa selaimen uudelleenohjauksen. Onko jQueryn ja Ajaxin avulla mahdollista kaapata kaikki lomakkeen tiedot ja lähettää ne PHP-skriptiin (esimerkiksi form.php)?
652
3
.ajax
:n peruskäyttö näyttää jotakuinkin tältä:HTML:
jQuery:
Huomaa: jQuery 1.8:sta lähtien
.success()
,.error()
ja.complete()
ovat poistuneet käytöstä.done()
,.fail()
ja.always()
:n hyväksi.Huomaa: Muista, että yllä oleva pätkä on tehtävä DOM ready:n jälkeen, joten sinun pitäisi laittaa se
$(document).ready()
käsittelijän sisään (tai käyttää lyhennettä$()
)..Vinkki: Voit ketjuttaa takaisinkutsukäsittelijöitä näin:
$.ajax().done().fail().always();
*PHP (eli form.php):
Huomaa: puhdista aina lähetetyt tiedot, jotta estät injektiot ja muun haitallisen koodin.
Voit myös käyttää lyhennettä
.post
edellä olevassa JavaScript-koodissa.ajax
:n sijasta:*Huomaa: Yllä oleva JavaScript-koodi on tehty toimimaan jQuery 1.8:n ja uudempien versioiden kanssa, mutta sen pitäisi toimia aiemmissa versioissa aina jQuery 1.5:een asti.
Voit tehdä Ajax-pyynnön jQueryn avulla seuraavalla koodilla.
HTML:
JavaScript:
Menetelmä 1
Menetelmä 2
.success()
,.error()
ja.complete()
-kutsut ovat poistuneet käytöstä jQuery 1.8:sta alkaen. Jos haluat valmistella koodisi niiden mahdollista poistamista varten, käytä niiden sijaan.done()
,.fail()
ja.always()
.MDN: abort()
. Jos pyyntö on jo lähetetty, tämä metodi keskeyttää pyynnön.Olemme siis onnistuneesti lähettäneet Ajax-pyynnön, ja nyt on aika napata tiedot palvelimelle.
PHP
Koska teemme POST-pyynnön Ajax-kutsussa (
type: "post"
), voimme nyt napata tietoja joko$_REQUEST
tai$_POST
avulla:Voit myös nähdä, mitä saat POST-pyynnössä yksinkertaisesti joko. Varmista muuten, että
$_POST
on asetettu. Muuten saat virheilmoituksen.Ja lisäät arvon tietokantaan. Varmista, että sensitoit tai poistat Kaikki pyynnöt (riippumatta siitä, teitkö GET- tai POST-pyynnön) kunnolla ennen kyselyn tekemistä. Parasta olisi käyttää valmisteltuja lausekkeita.
Ja jos haluat palauttaa tietoja takaisin sivulle, voit tehdä sen kaikuilemalla tiedot kuten alla.
Ja sitten voit saada sen näin:
On olemassa pari lyhennettyä menetelmää. Voit käyttää alla olevaa koodia. Se tekee saman työn.
Voit käyttää serialize. Alla on esimerkki.