<!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()"> <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;
}