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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录页面</title><script src="js/jquery3.3.1.js" type="text/javascript"></script><form i

梁云亮

5800人浏览 · 2020-08-16 23:39:31

梁云亮 · 2020-08-16 23:39:31 发布

服务器代码

@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>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Expect脚本实战：多条件匹配与防卡死技巧

在自动化测试和系统初始化中，我们常常使用 Expect 脚本来完成一系列交互操作，比如自动输入密码、监听输出并作出响应。然而，实际项目中可能遇到多步骤输出匹配的场景：只有在先匹配到某一行输出，再匹配到另一行输出时，才需要做出响应。同时，如果 “testX failed” 出现了，但 “set params error” 没有在合理时间内出现，不要卡死，而是打印警告并继续。这个写法的问题在于：如

2048 AI社区

AI模型版本控制的标签管理：架构师的技巧

在AI模型生命周期中，版本控制是保障模型可追溯性、协作效率与生产可靠性的核心环节。而标签管理作为版本控制的"语义接口"，其设计质量直接决定了团队对模型版本的理解、检索与复用能力。本文从架构师视角出发，结合第一性原理与MLOps实践，系统阐述AI模型标签管理的理论框架、架构设计、实现机制与高级考量。通过拆解标签的"唯一标识+语义描述"本质，提出四维标签模型。