Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zum Senden eines Formulars mit Ajax
Detaillierte Erläuterung der Schritte zum Senden eines Formulars mit Ajax
- php中世界最好的语言Original
- 2018-04-25 14:30:121461Durchsuche
Dieses Mal erkläre ich Ihnen ausführlich die Schritte zur Verwendung von Ajax zum Senden eines Formularformulars. Welche Vorsichtsmaßnahmen gelten für die Verwendung von Ajax zum Senden eines Formularformulars? Werfen wir einen Blick darauf.
Wenn Sie bei Verwendung eines Formulars auf „Senden“ klicken, um das Absendeereignis auszulösen, führt dies im Allgemeinen dazu, dass die Seite springt. Die Steuerung von Verhaltensweisen wie Sprüngen zwischen Seiten erfolgt häufig im Backend und wird vom Backend gesteuert der Seitensprung und die Datenübertragung, aber irgendwann möchten Sie nicht, dass die Seite springt, oder Sie möchten die Kontrolle auf das Frontend übertragen und js verwenden, um den Seitensprung oder die Datenänderungen durchzuführen.
Im Allgemeinen denken wir bei dieser Art von asynchronen Vorgängen an die Ajax-Methode. Nach der Implementierung der Funktion haben wir diesen Artikel zusammengestellt, um die Formularübermittlung und nachfolgende asynchrone Vorgänge über die Ajax-Methode zu implementieren.
Gängige Formularübermittlungsmethoden
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>login test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="login test"> </head> <body> <p id="form-p"> <form id="form1" action="/users/login" method="post"> <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p> <p>密 码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p> <p><input type="submit" value="登录"> <input type="reset" value="重置"></p> </form> </p> </body> </html>
Nach dem Klicken auf die Anmeldeschaltfläche wird das Formularübermittlungsereignis ausgelöst und die Daten an das Backend übertragen. Das Backend steuert Seitensprünge und Daten.
Ajax implementiert die Formularübermittlungsmethode
Nach der Änderung lautet der Code wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ajax方式">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function login() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//服务端接收的数据类型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常！");
}
});
}
</script>
</head>
<body>
<p id="form-p">
<form id="form1" onsubmit="return false" action="##" method="post">
<p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
</form>
</p>
</body>
</html>
Hinweise
Üblicherweise ist der Typ der angeklickten Anmeldeschaltfläche „Senden“; Im Allgemeinen ist die Aktion des Formulars nicht leer.
Was in der Ajax-Methode beachtet werden muss, sind die Parameter in der $.ajax-Methode: dataType und data.
Ich schreibe selten Front-End-Code. Ich kann ihn verstehen und ändern, daher verwende ich auch Baidu, um diese Funktion zu implementieren. Bei Baidu war der in der $.ajax-Methode des von Baidu erhaltenen Codes festgelegte Parameterwert „html“ anstelle von „json“, was dazu führte, dass ich beim ersten Debuggen weiterhin Fehler meldete. Schließlich habe ich ihn geändert zu „json“. Hier ist eine besondere Erklärung und Erinnerung: Gehen Sie nicht wie ich in die falsche Richtung. Wie im obigen Code werden die Daten einfach serialisiert und übertragen bilden.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
jQuery implementiert asynchrone AktualisierungWie lädt Ajax Dateien und Bilder asynchron hoch
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Senden eines Formulars mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!