Ich versuche, Daten von einem Formular an eine Datenbank zu senden. Hier ist das Formular, das ich benutze:
<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 Senden des Formulars, dies führt jedoch dazu, dass der Browser umleitet. Ist es mit jQuery und Ajax möglich, alle Daten des Formulars zu erfassen und an ein PHP-Skript (ein Beispiel, form.php ) zu senden ?
Antworten:
Die grundlegende Verwendung von
.ajax
würde ungefähr so aussehen:HTML:
jQuery:
Hinweis: Da jQuery 1.8
.success()
,.error()
und.complete()
sind veraltet zugunsten von.done()
,.fail()
und.always()
.Hinweis: Denken Sie daran, dass das obige Snippet nach der DOM-Bereitschaft erstellt werden muss. Sie sollten es daher in einen
$(document).ready()
Handler legen (oder die$()
Kurzform verwenden).Tipp: Sie können die Kette die Callback - Handler wie folgt aus :
$.ajax().done().fail().always();
PHP (dh form.php):
Hinweis: Bereinigen Sie die veröffentlichten Daten immer , um Injektionen und anderen schädlichen Code zu vermeiden.
Sie können auch die Kurzform
.post
anstelle des.ajax
obigen JavaScript-Codes verwenden:Hinweis: Der obige JavaScript-Code funktioniert mit jQuery 1.8 und höher, sollte jedoch mit früheren Versionen bis auf jQuery 1.5 funktionieren.
quelle
request
Wurde als lokale Var deklariert, dieif (request) request.abort();
niemals funktioniert.serialize()
sie sonst übersprungen werden.Um eine Ajax-Anfrage mit jQuery zu stellen , können Sie dies mit dem folgenden Code tun.
HTML:
JavaScript:
Methode 1
Methode 2
Die
.success()
,.error()
und.complete()
Rückrufe sind veraltet wie von jQuery 1.8 . Um den Code für ihre spätere Entfernung vorzubereiten, verwendet.done()
,.fail()
und.always()
stattdessen.MDN: abort()
. Wenn die Anfrage bereits gesendet wurde, bricht diese Methode die Anfrage ab.Wir haben also erfolgreich eine Ajax-Anfrage gesendet, und jetzt ist es Zeit, Daten an den Server zu übertragen.
PHP
Während wir eine POST-Anfrage in einem Ajax-Aufruf (
type: "post"
) stellen, können wir jetzt Daten mit entweder$_REQUEST
oder abrufen$_POST
:Sie können auch einfach sehen, was Sie in der POST-Anfrage erhalten. Übrigens, stellen Sie sicher, dass
$_POST
eingestellt ist. Andernfalls erhalten Sie eine Fehlermeldung.Und Sie fügen einen Wert in die Datenbank ein. Stellen Sie sicher, dass Sie alle Anforderungen (unabhängig davon, ob Sie ein GET oder ein POST durchgeführt haben) ordnungsgemäß sensibilisieren oder entkommen, bevor Sie die Abfrage durchführen. Am besten verwenden Sie vorbereitete Aussagen .
Und wenn Sie Daten auf die Seite zurückgeben möchten, können Sie dies tun, indem Sie diese Daten wie unten beschrieben wiederholen.
Und dann können Sie es bekommen wie:
Es gibt einige Kurzmethoden . Sie können den folgenden Code verwenden. Es macht die gleiche Arbeit.
quelle
dataType
), damit Sie möglicherweise JSON oder ein anderes Format akzeptieren können ?Ich möchte Ihnen eine detaillierte Methode zum Posten mit PHP + Ajax sowie Fehler mitteilen, die bei einem Fehler zurückgeworfen werden.
Erstellen Sie zunächst zwei Dateien, z. B.
form.php
undprocess.php
.Wir werden zuerst eine erstellen,
form
die dann mit derjQuery
.ajax()
Methode eingereicht wird. Der Rest wird in den Kommentaren erklärt.form.php
Überprüfen Sie das Formular mithilfe der clientseitigen Überprüfung von jQuery und übergeben Sie die Daten an
process.php
.Jetzt schauen wir uns das an
process.php
Die Projektdateien können von http://projects.decodingweb.com/simple_ajax_form.zip heruntergeladen werden .
quelle
Sie können serialize verwenden. Unten ist ein Beispiel.
quelle
$.parseJSON()
ist ein totaler Lebensretter, danke. Ich hatte Probleme, meine Ausgabe anhand der anderen Antworten zu interpretieren.HTML :
JavaScript :
quelle
Ich benutze den unten gezeigten Weg. Es sendet alles wie Dateien.
quelle
Wenn Sie Daten mit jQuery Ajax senden möchten, müssen Sie weder ein Formular-Tag noch eine Schaltfläche zum Senden senden
Beispiel:
quelle
quelle
Die Behandlung von Ajax-Fehlern und Loader vor dem Senden und nach dem erfolgreichen Senden zeigt eine Warn-Bootbox mit einem Beispiel:
quelle
Ich verwende diesen einfachen einzeiligen Code jahrelang ohne Probleme (es erfordert jQuery):
Hier bedeutet ap () eine Ajax-Seite und af () eine Ajax-Form. In einem Formular wird durch einfaches Aufrufen der Funktion af () das Formular an die URL gesendet und die Antwort in das gewünschte HTML-Element geladen.
quelle
Geben Sie in Ihre PHP-Datei ein:
und senden Sie in Ihrer js-Datei einen Ajax mit dem Datenobjekt
oder behalten Sie es wie beim Absenden des Formulars. Sie benötigen dies nur, wenn Sie eine geänderte Anfrage mit berechnetem Zusatzinhalt und nicht nur einigen Formulardaten senden möchten, die vom Kunden eingegeben werden. Zum Beispiel ein Hash, ein Zeitstempel, eine Benutzer-ID, eine Sitzungs-ID und dergleichen.
quelle
Bitte prüfen Sie das. Dies ist der vollständige Ajax-Anforderungscode.
quelle
Dies ist ein sehr guter Artikel , der alles enthält, was Sie über das Senden von jQuery-Formularen wissen müssen.
Artikelübersicht:
Einfaches Senden von HTML-Formularen
HTML:
JavaScript:
HTML Multipart / Formulardaten Formular senden
Zum Hochladen von Dateien auf den Server können wir die für XMLHttpRequest2 verfügbare FormData-Schnittstelle verwenden, die ein FormData-Objekt erstellt und mit jQuery Ajax einfach an den Server gesendet werden kann.
HTML:
JavaScript:
Ich hoffe das hilft.
quelle
Seit der Einführung der Fetch-API gibt es wirklich keinen Grund mehr, dies mit jQuery Ajax oder XMLHttpRequests zu tun. Um Formulardaten in ein PHP-Skript in Vanille-JavaScript zu POSTEN, haben Sie folgende Möglichkeiten:
Hier ist ein sehr einfaches Beispiel für ein PHP-Skript, das die Daten aufnimmt und eine E-Mail sendet:
quelle