$.ajax post 完全使用方式

最新推荐文章于 2023-07-17 11:54:28 发布

多久会在

最新推荐文章于 2023-07-17 11:54:28 发布

阅读量446

点赞数

本文链接：https://blog.csdn.net/qq_29001173/article/details/88791378

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login</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">
</head>
<body>
<div>
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input id="username" name="username" type="text" tabindex="1" size="15"/></p>
        <p>密　码：<input id="password" name="password" type="password" tabindex="2" size="15"/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    function login() {
        var data = {
            username: $("#username").val(),
            password: $("#password").val()
        }
        $.ajax({
            // 几个参数需要注意一下
            type: "post",// 方法类型
            dataType: "json",// 服务器返回的数据类型
            url: "/user/login",                 // url
            data: $("#form1").serialize(),      // 使用表单序列化或将data对象放进来
            // data: JSON.stringify(data),      // 和contentType同时使用，后端需加上@RequestBody
            // contentType: "application/json", // 发送的数据类型, 默认值: "application/x-www-form-urlencoded"
            success: function (data) {
                console.log(data);// 打印服务端返回的数据(调试用)
                if (data.status == 200) {
                    alert("SUCCESS");
                } else {
                    console.log("状态: " + data.status + ", 警告: " + data.msg);
                }
            },
            error: function (e) {
                console.log("状态: " + e.status + ", 警告: " + e.statusText);
            }
        });
    }
</script>
</body>
</html>

@ResponseBody
@RequestMapping(value = "/login", method = RequestMethod.POST) // contentType 是 application/json 时需加上 @RequestBody
public Map<String, Object> login(User u) {
    Map<String, Object> modelMap = new HashMap<>(2);
    try {
        System.out.println("username: " + u.getUsername() + ", " + "password: " + u.getPassword());
        // int i = 1/0;
        modelMap.put("status", 200);
    } catch (Exception e) {
        modelMap.put("status", 500);
        modelMap.put("msg", e.getMessage());
    }
    return modelMap;
}

多久会在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
$.ajax post 完全使用方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>login</title> <meta http-equiv="Content-Type" content="text/html; charset...
复制链接

扫一扫