Implémentation Ajax de la soumission du formulaire Form et précautions-tutoriel php-php.cn

Implémentation Ajax de la soumission du formulaire Form et précautions

小云云

Libérer： 2023-03-18 06:06:01

original

1478 Les gens l'ont consulté

Lors de l'utilisation d'un formulaire, une fois que vous cliquez sur Soumettre pour déclencher l'événement de soumission, la page sautera généralement. Le contrôle des comportements tels que les sauts entre les pages se fait souvent dans le backend, et le backend contrôlera les sauts de page. et le transfert de données, mais à un moment donné, vous ne voulez pas que la page saute, ou vous souhaitez mettre le contrôle sur le front-end et utiliser js pour effectuer le saut de page ou les modifications de données. Cet article présente principalement l'utilisation des méthodes Ajax pour implémenter la soumission de formulaires et les précautions à prendre. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Généralement, pour ce type d'opération asynchrone, nous penserons à la méthode ajax, donc après avoir implémenté la fonction, nous avons compilé cet article pour implémenter la soumission du formulaire et les opérations asynchrones ultérieures via la méthode ajax.

Méthodes courantes de soumission de formulaire

<!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>

Copier après la connexion

Après avoir cliqué sur le bouton de connexion, l'événement de soumission de formulaire est déclenché et les données sont transmises au backend, qui contrôle le saut de page et les données.

Ajax implémente la méthode de soumission de formulaire

Après modification, le code est le suivant :

<!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>

Copier après la connexion

Notes

En commun méthodes , le type du bouton de connexion cliqué est "soumettre"
De manière courante, l'action du formulaire n'est pas vide
ajax Ce qui doit être noté dans la méthode, ce sont les paramètres de la méthode $.ajax : dataType et data.

J'écris rarement du code front-end. Le niveau est d'entrée de gamme. Je peux le comprendre et le modifier, donc j'utilise souvent Baidu, et cette fois je l'ai également utilisé pour l'implémenter. cette fonction Baidu, cependant, la valeur du paramètre dataType définie dans la méthode $.ajax du code que j'ai reçu de Baidu était "html" au lieu de "json", ce qui m'a amené à continuer à signaler des erreurs lorsque je l'ai débogué pour la première fois. Je l'ai changé en "json". Succès, voici donc une explication spéciale et un rappel, ne vous trompez pas comme moi. Il y a aussi la valeur des données transmises au serveur, comme le code ci-dessus, il suffit de sérialiser et de transmettre le. données dans le formulaire.

Recommandations associées :

Exemple d'explication détaillée d'ajax pour implémenter la fonction de téléchargement de fichiers sans actualisation

Utilisation de jQuery+Ajax en PHP pour implémenter la fonction de requête de pagination

Implémentation AJAX d'un exemple de code de demande asynchrone de page d'inscription simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!