Ausführliche Erläuterung der Ajax-Methode zur Implementierung der Formularübermittlung und Vorsichtsmaßnahmen-PHP-Tutorial-php.cn

Ausführliche Erläuterung der Ajax-Methode zur Implementierung der Formularübermittlung und Vorsichtsmaßnahmen

小云云

Freigeben： 2023-03-18 13:22:02

Original

1362 Leute haben es durchsucht

Wenn Sie ein Formular verwenden und 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 das Backend steuert Seitensprünge und 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. In diesem Artikel wird hauptsächlich die Verwendung von Ajax-Methoden zur Implementierung von Formularformularen und Vorsichtsmaßnahmen vorgestellt. Ich hoffe, dass er allen helfen kann.

Im Allgemeinen denken wir alle bei dieser Art von asynchronen Vorgängen an die Ajax-Methode. Daher haben wir nach der Implementierung der Funktion diesen Artikel zusammengestellt, um die Formularübermittlung und nachfolgende asynchrone Vorgänge über die Ajax-Methode zu implementieren.

Übliche 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 Login kopieren

Nach dem Klicken auf die Anmeldeschaltfläche wird das Formularübermittlungsereignis ausgelöst und die Daten werden an das Backend übertragen, das den Seitensprung und die Daten steuert.

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>

Nach dem Login kopieren

Hinweise

Gemeinsam Methoden: Der Typ der angeklickten Anmeldeschaltfläche ist „Senden“; die Aktion des Formulars ist normalerweise nicht leer 🎜>ajax Was in der 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.

Wird häufig in JavaScript-Formular-Formularcode-Sharing (Sammlung) verwendet

Detaillierte Erläuterung der Übermittlungsverwendung von Formular-Formular-Senden und Schaltfläche in HTML

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Ajax-Methode zur Implementierung der Formularübermittlung und Vorsichtsmaßnahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!