2019-9-16 seo達(dá)人
后臺返回json數(shù)據(jù)給前臺和前臺解析json數(shù)據(jù)（總結(jié)）
一般來說web開發(fā)中，前臺采用json數(shù)據(jù)提交給后臺，后臺處理數(shù)據(jù)以后返回json數(shù)據(jù)給前臺，前臺解析json，顯示數(shù)據(jù)。
總而言之，前后臺直接交換的數(shù)據(jù)格式最常用的非json數(shù)據(jù)無疑了。
這里就總結(jié)一些json數(shù)據(jù)的前后臺處理方式。
1.JSON數(shù)據(jù)
JSON(JavaScript Object Notation, JS 對象簡譜)
是一種輕量級的數(shù)據(jù)交換格式，比xml更輕巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數(shù)據(jù)所占用的帶寬）。
json是javascript原生格式，就是說在javascript中處理json數(shù)據(jù)，需要引用其他API或工具包。
簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。
只需要記??！
Json是一種文本字符串！被存儲在responseText屬性中，而讀取json數(shù)據(jù)可以使用javascript的eval函數(shù)來解析json。
2.json規(guī)則：
在 JS 語言中，一切都是對象，對象是一個無序的 “鍵/值” 對集合。
因此，任何支持的類型都可以通過 JSON 來表示，例如字符串、數(shù)字、對象、數(shù)組等。但是對象和數(shù)組是比較特殊且常用的兩種類型：
? 對象表示為鍵值對.
? 數(shù)據(jù)由逗號分隔.
? 花括號{}保存對象.
? 方括號[]保存數(shù)組.
鍵/值對組合中的鍵名寫在前面并用雙引號 “” 包裹，使用冒號 : 分隔，然后緊接著值：
{"firstName": "Json"}
1
這很容易理解，等價于這條 JavaScript 語句：
{firstName : "Json"}
1
對象在 JS 中是使用花括號包裹 {} 起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 {key1：value1, key2：value2, …} 的鍵值對結(jié)構(gòu)。
在面向?qū)ο蟮恼Z言中，key 為對象的屬性，value 為對應(yīng)的值。
鍵名可以使用整數(shù)和字符串來表示，值的類型可以是任意類型。
數(shù)組在 JS 中是方括號 [] 包裹起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 [“java”, “javascript”, “vb”, …] 的索引結(jié)構(gòu)。
在 JS 中，數(shù)組是一種比較特殊的數(shù)據(jù)類型，它也可以像對象那樣使用鍵值對，但還是索引使用得多。同樣，鍵名可以使用整數(shù)和字符串來表示，值的類型可以是任意類型。
3.JSON 與 JS 對象的關(guān)系：
很多人搞不清楚 JSON 和 Js 對象的關(guān)系，甚至連誰是誰都不清楚。其實，可以這么理解：
JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質(zhì)是一個字符串。
如：
var obj = {a: 'Hello', b: 'World'}; //這是一個對象，注意鍵名也是可以使用引號包裹的
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串，本質(zhì)是一個字符串
1
2
4.后臺返回json數(shù)據(jù)
一般來說，使用JsonObject來將Java類型數(shù)據(jù)轉(zhuǎn)換成Json類型，首先要下載該庫相關(guān)的jar包，下載地址如下：
json-jar包下載
JsonObject的使用：
后臺controller部分代碼:
JSONObject object = new JSONObject(); //創(chuàng)建Json對象
object.put("username", "張三"); //設(shè)置Json對象的屬性
object.put("password", "123456");
System.out.println(object.toString()); //調(diào)用toString方法將json對象轉(zhuǎn)換成json字符串
//把json數(shù)據(jù)返回給瀏覽器：
PrintWriter out = cu.getWriterOut(response);
out.print(object.toString());
//或者
response.getWriter().write(jsonObject.toString());
1
2
3
4
5
6
7
8
9
10
11
5.在JavaScript代碼中接收J(rèn)son數(shù)據(jù)：
假設(shè)result為瀏覽器得到的json數(shù)據(jù)，可以使用以下js代碼可以將json對象轉(zhuǎn)換為字符串。
比如：
通過$.get從后臺獲取了一段json串{“id”:“1”,“name”:“ww”}，然后要拿到這里面的id和name值：
注意！注意！注意！
如果你直接這么寫！
$.get(url,
function(data) {
alert("ID:" + data.id + "\nName:" + data.name);
});
1
2
3
4
直接這樣寫的話，界面會alert提示undefined，因為沒能正確解析返回的字符串。
圖示：
解決方案：
1、 需要用eval()函數(shù)
將返回的串轉(zhuǎn)化成可用的strig串，eval(data)，但是因為原串里面是以{}開始和結(jié)束的，會被認(rèn)為是可執(zhí)行方法，因此需要加上()包圍起來,最終形成：
var jsonobj= eval('(' + data + ')'); // 把JSON字符串解析為javascript對象
1
然后再
alert("ID:" + jsonobj.id + "\nName:" + jsonobj.name);
1
各種正常的按key取值，就能正常顯示了。
2、獲取的時候就直接表示返回的是json格式，用.getJSON代替 .getJSON代替.getJSON代替.get，其他代碼不變，也能正常獲取。
也可以直接獲取json對象的屬性，如下：console.log(result.username);
前端js代碼:
$.ajax({
url: url,
type: "POST",
data: parameters,
dataType:"json",
async: false,
success: function(result){
var newData = JSON.stringify(result); //將json對象轉(zhuǎn)換為字符串
newData = eval("("+newData+")"); /解析json
var annualDays = newData.annualDays;
var entryDate = newData.entryDate;
$("input[name='extendDataFormInfo.value(fd_shengyu_nianjia)']").val(annualDays);
$("input[name='extendDataFormInfo.value(fd_ruzhi_date)']").val(entryDate);
}});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ps: 注意注釋中的代碼，如果少了這一句，那么直接alert(result);得到的結(jié)果會是
所以在這里stringfy()的作用是用于從一個對象解析出字符串
加上了var newData = JSON.stringify(result);這句，然后你再alert(newData);
得到的就會是你想要的結(jié)果，如下:
另外：
如果返回的json數(shù)據(jù)格式不是很規(guī)范的解決辦法：
判斷后臺返回的數(shù)據(jù)格式是否字符串，是則轉(zhuǎn)，不是則不轉(zhuǎn)？
var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content
1
總結(jié)：
前臺發(fā)送請求，并且設(shè)置數(shù)據(jù)為json格式‘
$.ajax({
url:"selectByid.",
datatype:'json',
data:{id:id}, // 發(fā)送數(shù)據(jù)
1
2
3
4
數(shù)據(jù)回調(diào)函數(shù)
success:function(data){
alert(data);
var json = eval("("+data+")");//將json類型字符串轉(zhuǎn)換為json對象
alert("hjf"+json.name);
1
2
3
4
給對應(yīng)的input賦值：
$("#id").val(json.id),
$("#name").val(json.name),
$("#age").val(json.age);
1
2
3
后臺代碼：返回json數(shù)據(jù)
response.getWriter().print(str); //將數(shù)據(jù)返回前臺ajax
1
6.前端ajax接不到j(luò)son解決？
在前臺：
async:false, //加上這個屬性就好了
1
7.返回的json字符串中有轉(zhuǎn)義符解決？
比如：
"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",}"
1
這樣我們我們使用JSON.parse(result) ，直接轉(zhuǎn)化為json的話是會報錯的。
解決方法：
我們先把轉(zhuǎn)義符用正則表達(dá)式去掉，
var string = result.replace("/\","");
var getDataArray = JSON.parse(string)
1
2
這樣就OK了，不過要注意有時候也是需要指定返回數(shù)據(jù)類型的
dataType:“json”
8.使用其他的json依賴包方式：
引入阿里巴巴的json依賴包：
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.9</version>
</dependency>
1
2
3
4
5
模擬后臺：
String params="{\"channelCode\":\"bbb\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.parseObject(params);
System.out.println(pa.getString("message"));
1
2
3
結(jié)果：
或者：
引入net.sf.json-lib依賴包：
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
1
2
3
4
5
6
后臺：
String params="{\"channelCode\":\"ccy\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.fromObject(params);
String accountNo=pa.getString("accountNo");
System.out.println(accountNo);
1
2
3
4
結(jié)果：
9.后臺對象轉(zhuǎn)換json數(shù)據(jù)返回給前臺
List集合轉(zhuǎn)換成json代碼：
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray2 = JSONArray.fromObject( list );
1
2
3
4
Map集合轉(zhuǎn)換成json代碼：
Map map = new HashMap();
map.put("name", "json");
map.put("bool", Boolean.TRUE);
map.put("int", new Integer(1));
map.put("arr", new String[] { "a", "b" });
map.put("func", "function(i){ return this.arr[i]; }");
JSONObject json = JSONObject.fromObject(map);
1
2
3
4
5
6
7
或者在項目中加入引入JSON-lib包，JSON-lib包同時依賴于以下的JAR包：
下載地址。
1.commons-lang.jar
2.commons-beanutils.jar
3.commons-collections.jar
4.commons-logging.jar
5.ezmorph.jar
6.json-lib-2.2.2-jdk15.jar
1
2
3
4
5
6
用法同上
JSONObject jsonObject = JSONObject.fromObject(message);
getResponse().getWriter().write(jsonObject.toString());
1
2
當(dāng)把數(shù)據(jù)轉(zhuǎn)為json后，用如上的方法發(fā)送到客戶端。前端就可以取得json數(shù)據(jù)了。（可以參考最下面的實例）
10.后臺返回數(shù)據(jù)給前臺，json中文亂碼解決方法
在實際運用場景中，當(dāng)前臺發(fā)起請求后，我們需要從后臺返回數(shù)據(jù)給前臺，這時，如果返回的數(shù)據(jù)中包含中文，則經(jīng)常會出現(xiàn)在后臺查詢出來都是好好，但是傳輸回去就莫名的亂碼了，而且即使在 web.xml 中進(jìn)行編碼過濾了，但還是亂碼。
解決辦法：
只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我們重復(fù)寫的麻煩，配置內(nèi)容如下：
<!--自定義消息轉(zhuǎn)換器的編碼,解決后臺傳輸json回前臺時，中文亂碼問題-->
<mvc:annotation-driven >
<mvc:message-converters register-defaults="true">
<bean class="org.springframework.http.converter.StringHttpMessageConverter" >
<property name = "supportedMediaTypes">
<list>
<value>application/json;charset=utf-8</value>
<value>text/html;charset=utf-8</value>
<!-- application 可以在任意 form 表單里面 enctype 屬性默認(rèn)找到 -->
<value>application/x-www-form-urlencoded</value>
</list>
</property>
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" ></bean>
</mvc:message-converters>
</mvc:annotation-driven>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
加上這段配置，保存重新運行，再次訪問，會發(fā)現(xiàn)，原先的中文亂碼都已經(jīng)正常顯示了。
方法二：在后臺的方法映射添加：
@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)
11.Spring MVC返回json數(shù)據(jù)的方式
藍(lán)藍(lán)設(shè)計的小編 http://m.820esy.cn