Comment soumettre des données de formulaire avec ajax ? Introduction à la méthode de soumission des données de formulaire avec ajax-js tutoriel-php.cn

Comment soumettre des données de formulaire avec ajax ? Introduction à la méthode de soumission des données de formulaire avec ajax

不言

Libérer： 2018-10-12 10:57:21

original

22173 Les gens l'ont consulté

Pour la soumission des données du formulaire, nous pensons généralement à utiliser ajax pour les soumettre. Alors, Comment ajax soumet-il les données du formulaire ? L'article suivant vous présentera la méthode données du formulaire de soumission ajax. Les partenaires dans le besoin peuvent s'y référer.

Sans plus tard, passons directement au texte~

La soumission Ajax des données du formulaire peut être divisée en deux types. L'une consiste à soumettre les données du formulaire en arrière-plan sans renvoyer de résultats. le traitement en arrière-plan est terminé ; l'autre consiste à renvoyer les résultats, et les informations sur le succès ou l'échec de l'exécution en arrière-plan doivent être renvoyées à la réception.

ajax lui-même appartient à la catégorie des résultats renvoyés, et la méthode de réussite consiste à gérer les résultats renvoyés en arrière-plan.

Les données du formulaire de soumission Ajax renvoient la méthode d'implémentation du résultat : sérialiser les données du 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="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: $(&#39;#form1&#39;).serialize(),                
                success: function (result) {                    
                console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },                
                error : function() {
                    alert("异常！");
                }
            });
        }    </script></head><body><div id="form-div">
    <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></div></body></html>

Copier après la connexion

Remarque : soumettre les données du formulaire de cette manière nécessite une attention particulière. Le plus important Le problème est que les éléments du formulaire doivent avoir un attribut name. Les paires clé-valeur obtenues en arrière-plan sont clé = valeur nom, valeur = chaque valeur. Notez qu'il doit y avoir une balise d'entrée, une étendue ou d'autres balises. être un attribut de nom. Non L'attribut de nom ne peut pas être obtenu en arrière-plan. ,

Ce qui précède représente l'intégralité du contenu de cet article. Pour un contenu plus passionnant, vous pouvez vous référer à d'autres colonnes du site Web PHP chinois ! ! !

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!