Mit einfachem Javascript können Sie dies nicht einfach tun. Wenn Sie ein Formular veröffentlichen, werden die Formulareingaben an den Server gesendet und Ihre Seite wird aktualisiert - die Daten werden auf der Serverseite verarbeitet. Das heißt, die submit()
Funktion gibt eigentlich nichts zurück, sondern sendet nur die Formulardaten an den Server.
Wenn Sie wirklich die Antwort in Javascript (ohne die Seite zu aktualisieren) wollen bekommen, dann müssen Sie AJAX verwenden, und wenn Sie über die Verwendung von AJAX zu sprechen beginnen, werden Sie brauchen , um eine Bibliothek zu verwenden. jQuery ist bei weitem das beliebteste und mein persönlicher Favorit. Es gibt ein großartiges Plugin für jQuery namens Form, das genau das tut, wie es sich anhört.
So würden Sie jQuery und dieses Plugin verwenden:
$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
alert("The server says: " + response);
}
})
;
var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
Eine Ajax-Alternative besteht darin, ein Unsichtbares
<iframe>
als Ziel Ihres Formulars festzulegen und dessen Inhalt<iframe>
in seinemonload
Handler zu lesen . Aber warum sich die Mühe machen, wenn es Ajax gibt?Hinweis: Ich wollte nur diese Alternative zu erwähnen , da einige der Antworten behaupten , dass es unmöglich dies ohne Ajax zu erreichen.
quelle
<iframe>
POSTs (mit Rückruf anparent
). Für Downloads und Uploads gleichermaßen ...Die Nicht-jQuery-Vanille-Javascript-Methode, extrahiert aus dem Kommentar von 12me21:
Für
POST
's ist der Standardinhaltstyp "application / x-www-form-urlencoded", der dem entspricht, was wir im obigen Snippet senden. Wenn Sie "anderes Zeug" senden oder es irgendwie optimieren möchten, finden Sie hier einige Details.quelle
<input type='button' onclick="submitForm(); return false;">
oder Sie konnten einen Ereignis-Listener für " Senden"Ich mache es so und es funktioniert.
quelle
event.preventDefault();
(event
= erstes Argument der Submit-Funktion) anstelle vonreturn false
. Die Rückgabe von false verhindert nicht nur, dass der Browser das Formular sendet, sondern verhindert auch, dass andere Nebenwirkungen auftreten, die wichtig sein könnten. Es gibt viele von Fragen im Zusammenhang zu dieser.FormData($("myform")[0])
wenn Sie versuchen, einen Eingabetyp = Datei-Upload durchzuführen.event.target.action
und$(event.target).serialize()
anstelle von$('#form').attr('action')
und verwenden$('#form').serialize()
.Zukünftige Internet-Sucher:
Für neue Browser (ab 2018: Chrome, Firefox, Safari, Opera, Edge und die meisten mobilen Browser, jedoch nicht IE)
fetch
ist eine Standard-API, die asynchrone Netzwerkaufrufe vereinfacht (für die wir früherXMLHttpRequest
oder jQuerys benötigt haben$.ajax
).Hier ist eine traditionelle Form:
Wenn Ihnen ein Formular wie das oben genannte übergeben wird (oder Sie es erstellt haben, weil es semantisches HTML ist), können Sie den
fetch
Code wie folgt in einen Ereignis-Listener einschließen:(Wenn Sie es wie das Originalposter manuell ohne Übermittlungsereignis aufrufen möchten, geben Sie einfach den
fetch
Code dort ein und übergeben Sie einen Verweis auf dasform
Element, anstatt es zu verwendenevent.target
.)Docs:
Abrufen: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Sonstiges: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Auf dieser Seite im Jahr 2018 wird Fetch (noch) nicht erwähnt. Es wird jedoch erwähnt, dass der Trick target = "myIFrame" veraltet ist. Außerdem gibt es ein Beispiel für form.addEventListener für das Ereignis 'submit'.
quelle
Ich bin nicht sicher, ob Sie verstehen, was submit () tut ...
Wenn Sie dies tun, werden
form1.submit();
die Formularinformationen an den Webserver gesendet.Der WebServer wird alles tun, was er tun soll, und eine brandneue Webseite an den Client zurücksenden (normalerweise dieselbe Seite mit etwas Geändertem).
Es gibt also keine Möglichkeit, die Rückgabe einer form.submit () -Aktion zu "fangen".
quelle
Es erfolgt kein Rückruf. Es ist wie einem Link zu folgen.
Wenn Sie die Serverantwort erfassen möchten, verwenden Sie AJAX oder senden Sie sie an einen Iframe und holen Sie sich, was dort nach dem
onload()
Ereignis des Iframes angezeigt wird .quelle
Sie können
event.preventDefault()
im Klick-Handler für Ihre Senden-Schaltfläche sicherstellen, dass das Standardereignis des HTML-Formularssubmit
nicht ausgelöst wird (was zur Aktualisierung der Seite führt).Eine andere Alternative wäre die Verwendung von Hacker Form Markup: Es ist die Verwendung von
<form>
undtype="submit"
das behindert das gewünschte Verhalten hier; da diese letztendlich zu Klickereignissen führen, die die Seite aktualisieren.Wenn Sie noch verwenden wollen
<form>
, und Sie wollen nicht , benutzerdefinierte schreiben Handler klicken, können Sie jQuery verwendenajax
Methode, die das gesamte Problem weg für Sie abstrahiert von Versprechen Verfahren auszusetzen fürsuccess
,error
usw.Um es noch einmal zusammenzufassen: Sie können Ihr Problem folgendermaßen lösen:
• Verhindern des Standardverhaltens in der Handhabungsfunktion durch Verwenden von
event.preventDefault()
• Verwenden von Elementen ohne Standardverhalten (z. B.
<form>
)• Verwenden von jQuery
ajax
(Ich habe gerade bemerkt, dass diese Frage aus dem Jahr 2008 stammt und nicht sicher ist, warum sie in meinem Feed angezeigt wurde. Auf jeden Fall ist dies hoffentlich eine klare Antwort.)
quelle
Dies ist mein Code für dieses Problem:
quelle
Wenn Sie die Ausgabe einer AJAX-Anfrage mit Chrome erfassen möchten, können Sie die folgenden einfachen Schritte ausführen:
quelle
quelle
Aufbauend auf der Antwort von @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ) behandle ich Fehler und Erfolge bei Formularbeiträgen:
Ich verwende
this
dies, damit meine Logik wiederverwendbar ist. Ich erwarte, dass HTML bei einem Erfolg zurückgegeben wird, also rendere ich es und ersetze die aktuelle Seite. In meinem Fall erwarte ich eine Umleitung zur Anmeldeseite, wenn die Sitzung abgelaufen ist Ich fange diese Weiterleitung ab, um den Status der Seite beizubehalten.Jetzt können sich Benutzer über eine andere Registerkarte anmelden und ihre Übermittlung erneut versuchen.
quelle
Sie müssen AJAX verwenden. Das Senden des Formulars führt normalerweise dazu, dass der Browser eine neue Seite lädt.
quelle
Sie können dies mit Javascript und AJAX-Technologie tun. Schauen Sie sich jquery und dieses Formular-Plug-In an . Sie müssen nur zwei js-Dateien einschließen, um einen Rückruf für form.submit zu registrieren.
quelle
Sie können dies mit jQuery und der folgenden
ajax()
Methode erreichen:quelle
Verwenden Sie zuerst $ (document) .ready (function ()) innerhalb dieser Verwendung ('formid'). submit (function (event)) und verhindern Sie dann die Standardaktion nach dem Aufruf der Ajax-Formularübermittlung $ .ajax ({,,,, ,}); Es wird ein Parameter benötigt, den Sie entsprechend Ihrer Anforderung auswählen können. Rufen Sie dann einen Funktionserfolg auf: function (data) {// tun Sie, was immer Sie wollen, mein Beispiel setzt die Antwort html auf div}
quelle
Zunächst benötigen wir serializeObject ();
Dann machst du einen einfachen Beitrag und bekommst eine Antwort
quelle
Ich habe folgenden Code perfekt mit Ajax mit mehrteiligen Formulardaten ausgeführt
quelle
Sie können jQuery.post () verwenden und gut strukturierte JSON-Antworten vom Server zurückgeben. Außerdem können Sie Ihre Daten direkt auf dem Server validieren / bereinigen. Dies ist eine gute Vorgehensweise, da dies sicherer (und sogar einfacher) ist als dies auf dem Client.
Zum Beispiel, wenn Sie ein HTML-Formular mit Benutzerdaten zur einfachen Registrierung auf dem Server (in saveprofilechanges.php) veröffentlichen müssen:
I. Kundenteile:
Ia HTML-Teil:
Ib Skriptteil:
II. Serverteil (saveprofilechanges.php):
quelle
Sie können das ohne Ajax tun.
schreibe dein Like unten.
.. .. ..
und dann in "action.php"
dann nach frmLogin.submit ();
Variable $ submit_return lesen ..
$ submit_return enthält den Rückgabewert.
Viel Glück.
quelle