Maison > Article > développement back-end > Implémentation Ajax de la soumission du formulaire Form et précautions
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="登录"> <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 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>
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
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!