suchen

Heim >Web-Frontend >js-Tutorial >Ajax-Methode zum Implementieren der Formularübermittlung

Ajax-Methode zum Implementieren der Formularübermittlung

php中世界最好的语言
php中世界最好的语言Original
2018-03-31 11:12:312424Durchsuche

Dieses Mal stelle ich Ihnen die Ajax-Methode zum Implementieren der Formularübermittlung vor. Was sind die Vorsichtsmaßnahmen für die Ajax-Methode zur Implementierung der Formularübermittlung?

Im Vordergrund geschrieben

Wenn Sie bei Verwendung des Formularformulars auf „Senden“ klicken, um das Absendeereignis auszulösen, führt dies im Allgemeinen dazu, dass die Seite geöffnet wird Die Steuerung von Verhaltensweisen wie Sprüngen zwischen Seiten erfolgt häufig im Backend, aber manchmal möchten Sie nicht, dass die Seite springt, oder Sie möchten die Steuerung im Frontend platzieren , durch js Um Seitensprünge oder Datenänderungen durchzuführen.

Im Allgemeinen denken wir für diese 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="登录">&nbsp<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 werden an ü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

  • Bei der üblichen Methode ist der Typ der angeklickten Anmeldeschaltfläche der Typ „Senden“;

    Bei der allgemeinen Methode ist die Aktion des Formulars nicht leer.

  • Was bei der Ajax-Methode beachtet werden muss, sind die Parameter in der $.ajax-Methode: dataType und Daten.

  • Ich schreibe selten Front-End-Code. Ich kann ihn verstehen und ändern, daher verwende ich ihn dieses Mal auch zur Implementierung Bei dieser Funktion war jedoch der dataType-Parameterwert, der in der $.ajax-Methode des von Baidu erhaltenen Codes festgelegt wurde, „html“ anstelle von „json“, was dazu führte, dass ich beim ersten Debuggen ständig Fehler meldete. Ich habe es in „json“ geändert, daher hier eine besondere Erklärung und Erinnerung: Gehen Sie nicht wie ich vor. Der Datenwert wird wie beim obigen Code einfach serialisiert und übertragen Daten im Formular.
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:

So stellen Sie asynchrone Anfragen mit Ajax


Detaillierte Erläuterung der Schritte zur domänenübergreifenden Implementierung Anfragen mit Ajax

Das obige ist der detaillierte Inhalt vonAjax-Methode zum Implementieren der Formularübermittlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Ajax-Implementierung der asynchronen AktualisierungNächster Artikel：Detaillierte Erläuterung der Ajax-Implementierung der asynchronen Aktualisierung

In Verbindung stehende Artikel

Mehr sehen