2019-9-16 seo達(dá)人
后臺(tái)返回json數(shù)據(jù)給前臺(tái)和前臺(tái)解析json數(shù)據(jù)（總結(jié)）
一般來說web開發(fā)中，前臺(tái)采用json數(shù)據(jù)提交給后臺(tái)，后臺(tái)處理數(shù)據(jù)以后返回json數(shù)據(jù)給前臺(tái)，前臺(tái)解析json，顯示數(shù)據(jù)。
總而言之，前后臺(tái)直接交換的數(shù)據(jù)格式最常用的非json數(shù)據(jù)無疑了。
這里就總結(jié)一些json數(shù)據(jù)的前后臺(tái)處理方式。
1.JSON數(shù)據(jù)
JSON(JavaScript Object Notation, JS 對(duì)象簡(jiǎn)譜)
是一種輕量級(jí)的數(shù)據(jù)交換格式，比xml更輕巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數(shù)據(jù)所占用的帶寬）。
json是javascript原生格式，就是說在javascript中處理json數(shù)據(jù)，需要引用其他API或工具包。
簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。
只需要記住！
Json是一種文本字符串！被存儲(chǔ)在responseText屬性中，而讀取json數(shù)據(jù)可以使用javascript的eval函數(shù)來解析json。
2.json規(guī)則：
在 JS 語言中，一切都是對(duì)象，對(duì)象是一個(gè)無序的 “鍵/值” 對(duì)集合。
因此，任何支持的類型都可以通過 JSON 來表示，例如字符串、數(shù)字、對(duì)象、數(shù)組等。但是對(duì)象和數(shù)組是比較特殊且常用的兩種類型：
? 對(duì)象表示為鍵值對(duì).
? 數(shù)據(jù)由逗號(hào)分隔.
? 花括號(hào){}保存對(duì)象.
? 方括號(hào)[]保存數(shù)組.
鍵/值對(duì)組合中的鍵名寫在前面并用雙引號(hào) “” 包裹，使用冒號(hào) : 分隔，然后緊接著值：
{"firstName": "Json"}
1
這很容易理解，等價(jià)于這條 JavaScript 語句：
{firstName : "Json"}
1
對(duì)象在 JS 中是使用花括號(hào)包裹 {} 起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 {key1：value1, key2：value2, …} 的鍵值對(duì)結(jié)構(gòu)。
在面向?qū)ο蟮恼Z言中，key 為對(duì)象的屬性，value 為對(duì)應(yīng)的值。
鍵名可以使用整數(shù)和字符串來表示，值的類型可以是任意類型。
數(shù)組在 JS 中是方括號(hào) [] 包裹起來的內(nèi)容，數(shù)據(jù)結(jié)構(gòu)為 [“java”, “javascript”, “vb”, …] 的索引結(jié)構(gòu)。
在 JS 中，數(shù)組是一種比較特殊的數(shù)據(jù)類型，它也可以像對(duì)象那樣使用鍵值對(duì)，但還是索引使用得多。同樣，鍵名可以使用整數(shù)和字符串來表示，值的類型可以是任意類型。
3.JSON 與 JS 對(duì)象的關(guān)系：
很多人搞不清楚 JSON 和 Js 對(duì)象的關(guān)系，甚至連誰是誰都不清楚。其實(shí)，可以這么理解：
JSON 是 JS 對(duì)象的字符串表示法，它使用文本表示一個(gè) JS 對(duì)象的信息，本質(zhì)是一個(gè)字符串。
如：
var obj = {a: 'Hello', b: 'World'}; //這是一個(gè)對(duì)象，注意鍵名也是可以使用引號(hào)包裹的
var json = '{"a": "Hello", "b": "World"}'; //這是一個(gè) JSON 字符串，本質(zhì)是一個(gè)字符串
1
2
4.后臺(tái)返回json數(shù)據(jù)
一般來說，使用JsonObject來將Java類型數(shù)據(jù)轉(zhuǎn)換成Json類型，首先要下載該庫相關(guān)的jar包，下載地址如下：
json-jar包下載
JsonObject的使用：
后臺(tái)controller部分代碼:
JSONObject object = new JSONObject(); //創(chuàng)建Json對(duì)象
object.put("username", "張三"); //設(shè)置Json對(duì)象的屬性
object.put("password", "123456");
System.out.println(object.toString()); //調(diào)用toString方法將json對(duì)象轉(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對(duì)象轉(zhuǎn)換為字符串。
比如：
通過$.get從后臺(tái)獲取了一段json串{“id”:“1”,“name”:“ww”}，然后要拿到這里面的id和name值：
注意！注意！注意！
如果你直接這么寫！
$.get(url,
function(data) {
alert("ID:" + data.id + "\nName:" + data.name);
});
1
2
3
4
直接這樣寫的話，界面會(huì)alert提示undefined，因?yàn)闆]能正確解析返回的字符串。
圖示：
解決方案：
1、 需要用eval()函數(shù)
將返回的串轉(zhuǎn)化成可用的strig串，eval(data)，但是因?yàn)樵锩媸且詛}開始和結(jié)束的，會(huì)被認(rèn)為是可執(zhí)行方法，因此需要加上()包圍起來,最終形成：
var jsonobj= eval('(' + data + ')'); // 把JSON字符串解析為javascript對(duì)象
1
然后再
alert("ID:" + jsonobj.id + "\nName:" + jsonobj.name);
1
各種正常的按key取值，就能正常顯示了。
2、獲取的時(shí)候就直接表示返回的是json格式，用.getJSON代替 .getJSON代替.getJSON代替.get，其他代碼不變，也能正常獲取。
也可以直接獲取json對(duì)象的屬性，如下：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對(duì)象轉(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é)果會(huì)是
所以在這里stringfy()的作用是用于從一個(gè)對(duì)象解析出字符串
加上了var newData = JSON.stringify(result);這句，然后你再alert(newData);
得到的就會(huì)是你想要的結(jié)果，如下:
另外：
如果返回的json數(shù)據(jù)格式不是很規(guī)范的解決辦法：
判斷后臺(tái)返回的數(shù)據(jù)格式是否字符串，是則轉(zhuǎn)，不是則不轉(zhuǎn)？
var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content
1
總結(jié)：
前臺(tái)發(fā)送請(qǐng)求，并且設(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對(duì)象
alert("hjf"+json.name);
1
2
3
4
給對(duì)應(yīng)的input賦值：
$("#id").val(json.id),
$("#name").val(json.name),
$("#age").val(json.age);
1
2
3
后臺(tái)代碼：返回json數(shù)據(jù)
response.getWriter().print(str); //將數(shù)據(jù)返回前臺(tái)ajax
1
6.前端ajax接不到j(luò)son解決？
在前臺(tái)：
async:false, //加上這個(gè)屬性就好了
1
7.返回的json字符串中有轉(zhuǎn)義符解決？
比如：
"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",}"
1
這樣我們我們使用JSON.parse(result) ，直接轉(zhuǎn)化為json的話是會(huì)報(bào)錯(cuò)的。
解決方法：
我們先把轉(zhuǎn)義符用正則表達(dá)式去掉，
var string = result.replace("/\","");
var getDataArray = JSON.parse(string)
1
2
這樣就OK了，不過要注意有時(shí)候也是需要指定返回?cái)?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
模擬后臺(tái)：
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
后臺(tái)：
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.后臺(tái)對(duì)象轉(zhuǎn)換json數(shù)據(jù)返回給前臺(tái)
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
或者在項(xiàng)目中加入引入JSON-lib包，JSON-lib包同時(shí)依賴于以下的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ù)了。（可以參考最下面的實(shí)例）
10.后臺(tái)返回?cái)?shù)據(jù)給前臺(tái)，json中文亂碼解決方法
在實(shí)際運(yùn)用場(chǎng)景中，當(dāng)前臺(tái)發(fā)起請(qǐng)求后，我們需要從后臺(tái)返回?cái)?shù)據(jù)給前臺(tái)，這時(shí)，如果返回的數(shù)據(jù)中包含中文，則經(jīng)常會(huì)出現(xiàn)在后臺(tái)查詢出來都是好好，但是傳輸回去就莫名的亂碼了，而且即使在 web.xml 中進(jìn)行編碼過濾了，但還是亂碼。
解決辦法：
只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我們重復(fù)寫的麻煩，配置內(nèi)容如下：
<!--自定義消息轉(zhuǎn)換器的編碼,解決后臺(tái)傳輸json回前臺(tái)時(shí)，中文亂碼問題-->
<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
加上這段配置，保存重新運(yùn)行，再次訪問，會(huì)發(fā)現(xiàn)，原先的中文亂碼都已經(jīng)正常顯示了。
方法二：在后臺(tái)的方法映射添加：
@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)
11.Spring MVC返回json數(shù)據(jù)的方式
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn