1 準備工作
1.1 靜態資源不攔截
DispatcherServlet會攔截到所有的資源，導致一個問題就是靜態資源（img、css、js）也會被攔截到，從而不能被使用。
解決問題就是需要配置靜態資源不進行攔截，在springmvc.xml配置文件添加如下配置
<!-- 設置靜態資源不過濾 -->
<mvc:resources location="/css/" mapping="/css/**"/> <!-- 樣式 -->
<mvc:resources location="/images/" mapping="/images/**"/> <!-- 圖片 -->
<mvc:resources location="/js/" mapping="/js/**"/> <!-- javascript -->
mvc:resources標籤配置不過濾
- location元素表示webapp目錄下的包下的所有文件
- mapping元素表示以/static開頭的所有請求路徑，如/static/a 或者/static/a/b
2 發送 ajax 請求
- pom
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
</dependency>
- response.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script>
// 頁面加載，綁定單擊事件
$(function () {
$("#btn").click(function () {
alert("按鈕點擊了");
$.ajax({
url : "user/testAjax",
contentType : "application/json;charset=UTF-8",
data:'{"username":"程咬金","password":"123","age":"45"}',
dataType : "json",
type:"post",
success:function (data) {
// data 是服務端響應的數據
alert(data);
alert(data.username);
}
});
});
})
</script>
</head>
<br>
<body>
<button id="btn">發送 ajax請求</button>
</body>
</html>
2.1 響應數據轉爲 json
@RequestBody註解把json的字符串轉換成JavaBean的對象@ResponseBody註解把JavaBean對象轉換成json字符串，直接響應
- Controller
@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/testAjax")
public @ResponseBody User testAjax(@RequestBody User user){
System.out.println("testAjax 方法執行了。。。");
// 客戶端發送ajax請求，傳的是 json字符串，後端把 json 字符串封裝到 user 對象
System.out.println(user);
// 做響應，模擬查詢數據庫
user.setUsername("哈哈哈");
user.setAge(66);
return user;
}
}