Jquery：ajax或post方式提交form表单

最新推荐文章于 2023-11-27 14:21:14 发布

梁云亮

最新推荐文章于 2023-11-27 14:21:14 发布

阅读量5.7k

点赞数 17

分类专栏： # TypeScript/JavaScript/JQuery 文章标签： Ajax serialize ajax方式提交form表单 post方式提交form表单 Jquery

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/108046600

版权

TypeScript/JavaScript/JQuery 专栏收录该内容

73 篇文章

订阅专栏

服务器代码

@Controller
@RequestMapping("/jwt")
public class JWTController {
    @RequestMapping("/login")
    @ResponseBody
    public Result<String> login(String username, String password) {
        if (username == null || password == null) {
            return new Result<String>(789, "用户名或密码不正确", null);
        }
        User user = new User(1001, username, password);
        return new Result<>(200, "请求成功！", JSON.toJSONString(user));
    }
}

ajax方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <script src="js/jquery3.3.1.js" type="text/javascript"></script>
        <form id="loginForm">
            <input type="text" name="username" value="zhangsan"><br>
            <input type="password" name="password" value="123456">
            <button id="btn">登录</button>
        </form>
    </head>
    <body>
        <script>
            $(function () {
                $("#btn").click(function () {
                    $.ajax({
                        type:"post",
                        dataType:"json", //预期服务器端返回的数据的类型
                        url:"jwt2/login",
                        data:$("#loginForm").serialize(),
                        success:function (data) {
                            console.info(data);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

post方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <script src="js/jquery3.5.1.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="loginForm">
            <input type="text" name="username" value="zhangsan"><br>
            <input type="password" name="password" value="123456">
        </form>
        <button id="btn">登录</button>
        <script>
            $(function () {
                let obj = {};

                function getObj(str) {
                    let arr = str.split('&');
                    arr.map(function (item) {
                        let tempArr = item.split('=');
                        obj[tempArr[0]] = tempArr[1];
                    });
                    console.log(obj);
                    return obj;
                }
                $("#btn").click(function () {
                    let p = $("#loginForm").serialize();
                    let params = getObj(p);
                    $.post(
                        "jwt/login",
                        params,
                        function (result) { //请求成功
                            console.log(result);
                            if (result.code == 200) {
                                //获取令牌并保存到本地
                                localStorage.setItem("token", '{"token":"' + result.data + '"}');
                            }
                            if (result.code == 789) {
                                window.location = "login";
                            }
                        }, "JSON");
                });
            });
        </script>
    </body>
</html>