jQuery_ajax提交表单form.html

最新推荐文章于 2024-09-08 21:45:17 发布

学无止境慢慢来

最新推荐文章于 2024-09-08 21:45:17 发布

阅读量232

点赞数

分类专栏：登录 jQuery

原文链接：https://blog.csdn.net/weixin_43895377/article/details/93198410

版权

jQuery 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery_ajax提交表单form</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<form id="form1" οnsubmit="return false" action="#" name="loginForm" method="post">
    <h3>用户登录</h3>
    <label for="username">用户名:</label>
    <input id="username" type="text" name="stuff_phone_num" placeholder="用户名" required>
    <p id="usernameValidateInfo"></p>

    <label for="password">密&emsp;码:</label>
    <input id="password" type="password" name="stuff_password" placeholder="密码" required>
    <p id="passwordValidateInfo"></p>

    <input type="checkbox" name="saveUserName_password" id="saveUsername_password">
    <label for="saveUsername_password">记住密码</label>
    <br>
<!--    <input type="submit" value="登 录" οnclick="login()" >-->
    <button οnclick="login()" id="loginBtn">登 录</button>
</form>

<script>
    /*参考：https://blog.csdn.net/weixin_43895377/article/details/93198410
    * 知识点：
        1.$('#form1').serialize()
            序列化表单的 name-value 成字符串: stuff_phone_num=aaa&stuff_password=aaa 的形式，
            可以直接用于 ajax 提交数据。
            经测试， οnsubmit="return false" 是必需的，用于阻止默认的提交。
            经测试，jQuery 不能序列化 table。

        2.form 默认的提交方式，会阻止 必填字段(required)为空的提交，而且会有提示（请填写此字段）。
            jQuery_ajax 提交表单的方式，不会阻止 必填字段(required)为空的提交（函数 login 的执行），
            也会有提示（请填写此字段），可以自己在 login 函数内，进行判断。
    */
    function login() {
        console.log("data:", $('#form1').serialize());
        // data: stuff_phone_num=aaa&stuff_password=aaa
        $("#passwordValidateInfo").html("");
        $("#usernameValidateInfo").html("");
        $.ajax({
            type: "POST",  // 规定请求的类型（GET 或 POST）， 默认为 "GET"。
            // dataType: "json",  // 预期服务器返回的数据类型。
            url: "http://61.240.19.xxx:xx/v1/Administration/Stuff/Project",
            data: $('#form1').serialize(),
            error: function (xhr, status, error) {
                /*如果请求失败要运行的函数。
                * xhr, XMLHttpRequest 对象。
                * status, 请求状态（parsererror）。
                * error, 错误信息。比如：error: SyntaxError: Unexpected token N in JSON at position 29。*/
                console.error("xhr:", xhr);
                console.error("status:", status);
                console.error("error:", error);
                if (xhr.responseJSON.error_code === 1005) {
                    $("#passwordValidateInfo").html("密码错误！");
                } else if (xhr.responseJSON.error_code === 1006) {
                    $("#usernameValidateInfo").html("账户错误!");
                }
            },
            success: function (result, status, xhr) {
                /*当请求成功时运行的函数。
                * result, 服务器返回的内容。
                * status, 请求状态（success）。
                * xhr, XMLHttpRequest 对象。*/
                console.log("result:", result);
                console.log("status:", status);
                console.log("xhr:", xhr);
                // location.href = "index.html";
            }
        });
    }
</script>

</body>
</html>