六、與json交互
1、兩種交互模式
上圖顯示了客戶端請求數據的兩種格式,一種是 直接請求 json 數據,另一種是 key/value 數據。但是不管請求是哪種數據,為了在前端頁面方便對結果進行解析。最終我們都轉換為 json 數據格式。
回到頂部
2、導入相應的 jar 包(詳情參看源碼)
回到頂部
3、在 springmvc.xml 文件中配置 json 轉換器
第一種方法:
1 |
<mvc:annotation-driven ></mvc:annotation-driven>
|
第二種方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- 用於將對象轉換為 JSON -->
<bean id= "stringConverter"
class = "org.springframework.http.converter.StringHttpMessageConverter" >
<property name= "supportedMediaTypes" >
<list>
<value>text/plain;charset=UTF- 8 </value>
</list>
</property>
</bean>
<bean id= "jsonConverter" class = "org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" ></bean>
<bean class = "org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" >
<property name= "messageConverters" >
<list>
<ref bean= "stringConverter" />
<ref bean= "jsonConverter" />
</list>
</property>
</bean>
|
回到頂部
4、請求為 json 數據測試
這裏我們需要註意兩個註解:
@ResponseBody把後臺pojo轉換json對象,返回到頁面。
@RequestBody接受前臺json數據,把json數據自動封裝pojo。
①、jsp 頁面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<%@ 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=UTF-8" >
<title>SpringMVC和 json 交互</title>
<script type= "text/javascript" src= "${pageContext.request.contextPath}/js/jquery-2.1.4.min.js" ></script>
</head>
<script type= "text/javascript" >
var dataJson = {
‘username‘ : ‘Bob‘ ,
‘sex‘ : ‘男‘
};
function requestJson(){
$.ajax({
type: "POST" ,
url: "${pageContext.request.contextPath}/requestJson" ,
//指定數據格式為 json
contentType: "application/json;charset=UTF-8" ,
data:JSON.stringify(dataJson),
dataType: "json" ,
success:function(data){
console.log(data.username);
console.log(data.sex);
}
});
}
</script>
<body>
<button onclick= "requestJson()" value= "請求是json,返回json" >請求是json,返回json</button>
</body>
</html>
|
②、Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
package com.ys.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ys.po.User;
@Controller
public class UserController {
//請求為json,返回json
@RequestMapping ( "/requestJson" )
//@RequestBody將請求信息的json串轉成user對象
//@ResponseBody將user對象轉成json輸出
@ResponseBody
public User requestJson( @RequestBody User user) throws Exception{
System.out.println(user);
return user; //由於@ResponseBody註解,將user轉成json格式返回
}
}
|
③、測試
我們訪問上面的jsp頁面,然後點擊按鈕,進入到 Controller
然後我們查看返回的數據:
回到頂部
5、請求為 key/value 數據測試
①、JSP 頁面
②、Controller
1 2 3 4 5 6 7 8 |
//請求為key/value,返回json
@RequestMapping ( "/requestKeyValue" )
//@RequestBody將請求信息的json串轉成user對象
@ResponseBody
public User requestKeyValue(User user) throws Exception{
System.out.println(user);
return user;
}
|
③、測試
然後返回數據:
回到頂部
6、遇到的問題
①、如下代碼,由於我們使用 Ajax 提交,我們在 JSP 頁面引入了jquery 文件,發現無論使用絕對路徑還是相對路徑,系統總是找不到這個文件?
1 |
<script type= "text/javascript" src= "${pageContext.request.contextPath}/js/jquery-2.1.4.min.js" ></script>
|
原因:因為你在web.xml 文件中,對於過濾器的配置是攔截所有請求。所以類似於*.js,或者*.css這樣的文件也被攔截了,故訪問不到。
解決辦法:
第一種辦法:我們可以使用上面配置的攔截器只攔截 *.do,或者*.action,而不是 “/”。那麽SpringMVC容器將不會攔截*.js,*.css這樣的文件。但是這種風格不支持 Restful,建議不采用。
第二種方法:在web.xml中配置攔截器的過濾請求
1 2 3 4 5 6 7 8 9 |
<!--要寫在DispatcherServlet的前面, 讓 defaultServlet先攔截請求,這樣請求就不會進入Spring了,我想性能是最好的吧。-->
<servlet-mapping>
<servlet-name> default </servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name> default </servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
|
第三種方法:在spingmvc.xml 中配置對靜態資源不過濾
1 2 3 |
<!-- 配置靜態文件過濾器 -->
<mvc:resources location= "/WEB-INF/css/" mapping= "/css/**" />
<mvc:resources location= "/WEB-INF/js/" mapping= "/js/**" />
|
②、也是比較容易犯的錯誤 415
這個錯誤產生的原因有很多。我們需要一步一步的排查:
第一步:必須保證導入的 jackson相關的jar包是全的。
第二步:在springmvc.xml文件中的配置的json轉換器一定不能缺少,如何配查看本篇博客的第三點
第三步:書寫 Ajax 請求時。contentType:"application/json;charset=UTF-8",不要不寫 contentType 這個屬性
第四步:Ajax傳給後臺的不要直接傳字符串,要轉換成json,即 data:JSON.stringify(dataJson),
六、與json交互