表单提交

最新推荐文章于 2025-05-31 16:17:57 发布

流浪者的短匕

最新推荐文章于 2025-05-31 16:17:57 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44000635/article/details/107404420

前端专栏收录该内容

12 篇文章

订阅专栏

$("#form-login").serialize()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<h1>用户登录</h1>
<form id="form-login" method="post" action="login">
    <table cellpadding="5">
        <tr>
            <td>用户名</td>
            <td><input name="username"/><span style="color:red;" id="span-username"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input name="password"/><span style="color:red;" id="span-password"></span></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" onclick="login()" value="登录"/>
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
    function login() {
        $("#span-username").empty();
        $("#span-password").empty();

        $.ajax({
            "url": "/pass",
            "data": $("#form-login").serialize(),
            "type": "post",
            "dataType": "json",
            "success": function (json) {
                if (json.state == 1) {
                    alert("登录成功！");
                } else if (json.state == 2) {
                    // alert("用户名不存在！");
                    $("#span-username").html("用户名不存在！");
                } else if (json.state == 3) {
                    // alert("密码错误！");
                    $("#span-password").html("密码错误！");
                }
            }
        });
    }
</script>
</body>
</html>