(1) 提交頁面的數據
(2) 登錄效果：
準備環境:
1)pom.xml添加依賴包
<!--阿里巴巴的jSON -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
2) springmvc.xml添加 -註解JSON轉換器
<!-- 開啓註解 -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter" />
</mvc:message-converters>
</mvc:annotation-driven>
3)編寫json.jsp頁面
<head>
<title>Title</title>
<link href="css/json.css" rel="stylesheet"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/json.js"></script>
</head>
<body>
<div id="msg"> </div>
<form action="">
<p>用戶名：<input type="text" name="uname" id="name" /></p>
<p>密碼：<input type="password" name="upass" id="pwd" /> </p>
<p> <input type="button" value="測試" onclick="testJson()" /> </p>
</form>
</body>
login,jsp
<head>
<title>Title</title>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/json.js"></script>
</head>
<body>
<div id="err"></div>
<form id="frm">
<p>用戶名：
<input type="text" name="uname"/>
</p>
<p>密碼：
<input type="password" name="upass"/>
</p>
<p>
<input type="button" name="sub" value="登錄" id="but" />
</p>
</form>
</body>
</html>
4) JS頁面
function testJson(){
//獲得參數值
var name =$("#name").val();
var pwd =$("#pwd").val();
// alert(name+"=>"+pwd);
//
$.getJSON("myjson",{"uname":name,"upass":pwd},function(data){
// alert(data.uname+"==>"+data.upass);
$("#msg").html(data.uname+"=>"+data.upass).css("background","gray");
});
}
$(function () {
//單擊事件
$("#but").click(function () {
//$("#frm").serialize()提交參數
$.getJSON("mylogin",$("#frm").serialize(),function (data) {
// alert(data);
//清空
if(data==1){
$("#err").html("登錄成功").css("color","blue");
}else{
$("#err").html("登錄失敗").css("color","red");
}
});
});
});
5) 編寫controll
@Controller
public class JsonController {
@RequestMapping(value = "/myjson")
@ResponseBody //返回json
public User myjson(User user) {
System.out.println(user);
// 返回JSON格式的響應
return user;
}
@RequestMapping(value = "/mylogin")
@ResponseBody //返回json
public String mylogin(User user) {
System.out.println("mylogin==>"+user);
//判斷
if ("戴洋洋".equals(user.getUname()) && "aaa".equals(user.getUpass())) {
return "1"; // 返回JSON格式的響應
} else {
return "0";
}
}
}
說明：
如果請求value/key響應json
@ResponseBody說明將返回的對象轉爲json對象
@RequestBody說明請求來的是json對象---因發送來的請求時value/key形式，所以不需要寫了！