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

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

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


  <title>login test</title>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>  


<p>
  </p>

    

用户名：

    

密　码：

    

 

  

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 :

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


  <title>login test</title>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <meta>
  <script></script>
  <script>
    function login() {
      $.ajax({
      //几个参数需要注意一下
        type: "POST",//方法类型
        dataType: "json",//服务端接收的数据类型
        url: "/users/login" ,//url
        data: $(&#39;#form1&#39;).serialize(),
        success: function (result) {
          console.log(result);//打印服务端返回的数据(调试用)
          if (result.resultCode == 200) {
            alert("SUCCESS");
          }
          ;
        },
        error : function() {
          alert("异常！");
        }
      });
    }
  </script>


<p>
  </p>

    

用户名：

    

密　码：

    

 

  

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!