Ajax-Implementierung der Formularübermittlung und Vorsichtsmaßnahmen-PHP-Tutorial-php.cn

Ajax-Implementierung der Formularübermittlung und Vorsichtsmaßnahmen

小云云

Freigeben： 2023-03-18 06:06:01

Original

1478 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 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.

Ü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 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. Hier ist 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.
Beispiel für eine detaillierte Erklärung von Ajax zur Implementierung der Funktion zum Hochladen von Dateien ohne Aktualisierung

Verwendung von jQuery+Ajax in PHP um die Paging-Abfragefunktion zu implementieren

AJAX-Implementierung eines einfachen asynchronen Anforderungsbeispielcodes für die Registrierungsseite

Das obige ist der detaillierte Inhalt vonAjax-Implementierung der Formularübermittlung und Vorsichtsmaßnahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!