jQuery Ajax POST Beispiel mit PHP
Ich versuche, Daten aus einem Formular an eine Datenbank zu senden. Hier ist das Formular, das ich verwende:
<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>
Der typische Ansatz wäre, das Formular abzuschicken, aber das führt dazu, dass der Browser eine Umleitung erstellt. Ist es möglich, mit jQuery und Ajax alle Daten des Formulars zu erfassen und sie an ein PHP-Skript (z. B. form.php) zu übermitteln?
652
3
Die grundlegende Verwendung von
.ajax
würde etwa so aussehen:HTML:
jQuery:
Hinweis: Seit jQuery 1.8 sind
.success()
,.error()
und.complete()
veraltet zugunsten von.done()
,.fail()
und.always()
.Hinweis: Denken Sie daran, dass das obige Snippet nach DOM ready ausgeführt werden muss, also sollten Sie es in einen
$(document).ready()
Handler einfügen (oder die Abkürzung$()
verwenden).*Tipp: Sie können die Callback-Handler wie folgt verketten: `$.ajax().done().fail().always();**
PHP (d.h. form.php):
*Hinweis: Bereinigen Sie immer die eingegebenen Daten4, um Injektionen und anderen bösartigen Code zu verhindern.
Sie können auch die Abkürzung
.post
anstelle von.ajax
im obigen JavaScript-Code verwenden:Hinweis: Der obige JavaScript-Code ist für jQuery 1.8 und höher ausgelegt, sollte aber auch mit früheren Versionen bis hinunter zu jQuery 1.5. funktionieren.
Um eine Ajax-Anfrage mit jQuery zu stellen, können Sie den folgenden Code verwenden.
HTML:
JavaScript:
Methode 1
Methode 2
Die
.success()
,.error()
, und.complete()
Callbacks sind ab jQuery 1.8 veraltet. Um Ihren Code auf ihre eventuelle Entfernung vorzubereiten, verwenden Sie stattdessen.done()
,.fail()
und.always()
.MDN: abort()
. Wenn die Anfrage bereits abgeschickt wurde, bricht diese Methode die Anfrage ab.Wir haben also erfolgreich eine Ajax-Anfrage gesendet, und nun ist es an der Zeit, Daten an den Server zu übertragen.
PHP
Da wir in einem Ajax-Aufruf eine POST-Anfrage stellen (
type: "post"
), können wir nun Daten entweder mit$_REQUEST
oder$_POST
abrufen:Sie können auch sehen, was Sie in der POST-Anfrage erhalten, indem Sie einfach entweder. BTW, stellen Sie sicher, dass
$_POST
gesetzt ist. Andernfalls erhalten Sie eine Fehlermeldung.Und Sie fügen einen Wert in die Datenbank ein. Vergewissern Sie sich, dass Sie alle Anfragen (egal ob GET oder POST) richtig sensibilisieren oder ausblenden, bevor Sie die Abfrage machen. Am besten verwenden Sie prepared statements.
Und wenn Sie Daten an die Seite zurückgeben möchten, können Sie dies tun, indem Sie die Daten wie unten dargestellt ausgeben.
Und dann können Sie sie wie folgt abrufen:
Es gibt eine Reihe von Kurzmethoden. Sie können den folgenden Code verwenden. Er erledigt die gleiche Arbeit.
Sie können serialize verwenden. Unten ist ein Beispiel.