recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes pour soumettre un formulaire en utilisant Ajax

Explication détaillée des étapes pour soumettre un formulaire en utilisant Ajax

php中世界最好的语言
php中世界最好的语言original
2018-04-25 14:30:121523parcourir

Cette fois, je vais vous donner une explication détaillée des étapes à suivre pour utiliser Ajax pour soumettre un formulaire Form. Quelles sont les précautions pour utiliser Ajax pour soumettre un formulaire Form. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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. le saut 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.

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>

Après avoir cliqué sur le bouton de connexion, l'événement de soumission de formulaire est déclenché et les données sont transférées vers Le backend contrôle les sauts 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>

Notes

  • Dans la méthode courante, le type de bouton de connexion cliqué est le type « soumettre »

  •  ;

    Dans la méthode courante, l'action du formulaire n'est pas vide

  • Ce qu'il faut noter dans la méthode ajax, ce sont les paramètres de la méthode $.ajax : dataType et données.

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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery implémente l'actualisation asynchrone

Comment ajax télécharge-t-il des fichiers et des images de manière asynchrone

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment télécharger des fichiers et des images de manière asynchrone avec ajaxArticle suivant：Comment télécharger des fichiers et des images de manière asynchrone avec ajax

Articles Liés

Voir plus