recherche

Maison  >  Article  >  interface Web  >  Méthode Ajax pour implémenter la soumission du formulaire Form

Méthode Ajax pour implémenter la soumission du formulaire Form

php中世界最好的语言
php中世界最好的语言original
2018-03-31 11:12:312392parcourir

Cette fois, je vais vous présenter la méthode Ajax pour implémenter la soumission de formulaire. Quelles sont les précautions pour la méthode Ajax pour implémenter la soumission de formulaire. Ce qui suit est un cas pratique, jetons un coup d'œil.

Écrit devant

Lors de l'utilisation du formulaire, une fois que vous avez cliqué sur Soumettre pour déclencher l'événement de soumission, la page sera généralement affichée sauter. Le contrôle des comportements tels que les sauts entre les pages se fait souvent dans le backend. Le backend contrôlera les sauts de page et le transfert de données, mais parfois vous ne voulez pas que la page saute, ou vous souhaitez mettre le contrôle sur le front-end. , via js Pour effectuer des sauts de page ou des 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 :

Comment faire des requêtes asynchrones avec Ajax

Explication détaillée des étapes permettant à Ajax d'implémenter cross -demandes de domaine

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：Explication détaillée de l'implémentation Ajax de l'actualisation asynchroneArticle suivant：Explication détaillée de l'implémentation Ajax de l'actualisation asynchrone

Articles Liés

Voir plus