SpringMVC與Ajax互動的幾種形式
阿新 • • 發佈：2018-12-31
- 情景：解析物件為json資料進行返回
SpringMVC:@RequestBody-將請求json串轉化成java物件，@ResponseBody-將java物件轉換成json串輸出
- 前提：
- 匯入json資料轉換的三個核心jar包(@RequestBody和 @ResponseBody依賴)
- 在介面卡中配置json資料轉換的解析器(因為使用的註解驅動內建包含，所以不需要再進行配置)
- JSP介面：引入jquery標頭檔案，使用Jquery的Ajax提交請求資訊，執行controller後返回的json串在ajax中進行解析
第一種：請求key/value，輸出json串【最常用】
- Ajax：
<script type="text/javascript"> function login() { $.ajax({ type : 'post', url : '${pageContext.request.contextPath}/user/login.mvc', //請求資料是key/value,這裡不需要指定contentType，預設就是key/value型別 data:'username=cyn&age=18', cache : false, sync : true, success : function(msg) { //返回並解析json串 alert(msg.username); }, error : function() { alert("請求失敗!"); } }); } </script>
- SpringMVC：
@RequestMapping("login")
@ResponseBody
public User login(User user){
System.out.println(user);
return user;
}第二種：請求json串，輸出json串
- Ajax：
<script type="text/javascript"> function login() { $.ajax({ type : 'post', url : '${pageContext.request.contextPath}/user/login.mvc', //指定請求資料格式是json串 contentType:'application/json;charset=utf-8', data:'{"username":"zhangsan","age":"12"}', cache : false, sync : true, success : function(msg) { //從返回結果集中獲取username的值 alert(msg.username); }, error : function() { alert("請求失敗!"); } }); } </script>
- SpringMVC：
@RequestMapping("login")
@ResponseBody
public User login(@RequestBody User user){
System.out.println(user);
return user;
}第三種： 請求key/value，輸出字串
- Ajax：
<script type="text/javascript">
function login() {
$.ajax({
type : 'post',
url : '${pageContext.request.contextPath}/user/login.mvc',
//請求資料是key/value,這裡不需要指定contentType，預設就是key/value型別
data:'username=cyn&age=18',
cache : false,
sync : true,
success : function(msg) {
//返回並列印字串
alert(msg);
},
error : function() {
alert("請求失敗!");
}
});
}
</script>- SpringMVC：
@RequestMapping("login")
public void login(HttpServletResponse response,User user){
System.out.println(user);
try {
response.getWriter().write(user.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}- 測試：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function login() {
$.ajax({
type : 'post',
url : '${pageContext.request.contextPath}/user/login.mvc',
//指定請求資料格式是json串
contentType:'application/json;charset=utf-8',
data:'{"username":"zhangsan","age":"12"}',
cache : false,
sync : true,
success : function(msg) {
//從返回結果集中獲取username的值
alert(msg);
},
error : function() {
alert("請求失敗!");
}
});
}
</script>
</head>
<body>
<button onclick="login()">傳送ajax請求</button>
</body>
</html>