后臺返回json數據給前臺和前臺解析json數據（總結）
一般來說web開發中，前臺采用json數據提交給后臺，后臺處理數據以后返回json數據給前臺，前臺解析json，顯示數據。
總而言之，前后臺直接交換的數據格式最常用的非json數據無疑了。
這里就總結一些json數據的前后臺處理方式。
1.JSON數據
JSON(JavaScript Object Notation, JS 對象簡譜)
是一種輕量級的數據交換格式，比xml更輕巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得節約傳輸數據所占用的帶寬）。
json是javascript原生格式，就是說在javascript中處理json數據，需要引用其他API或工具包。
簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。
只需要記住！
Json是一種文本字符串！被存儲在responseText屬性中，而讀取json數據可以使用javascript的eval函數來解析json。
2.json規則：
在 JS 語言中，一切都是對象，對象是一個無序的 “鍵/值” 對集合。
因此，任何支持的類型都可以通過 JSON 來表示，例如字符串、數字、對象、數組等。但是對象和數組是比較特殊且常用的兩種類型：
? 對象表示為鍵值對.
? 數據由逗號分隔.
? 花括號{}保存對象.
? 方括號[]保存數組.
鍵/值對組合中的鍵名寫在前面并用雙引號 “” 包裹，使用冒號 : 分隔，然后緊接著值：
{"firstName": "Json"}
1
這很容易理解，等價于這條 JavaScript 語句：
{firstName : "Json"}
1
對象在 JS 中是使用花括號包裹 {} 起來的內容，數據結構為 {key1：value1, key2：value2, …} 的鍵值對結構。
在面向對象的語言中，key 為對象的屬性，value 為對應的值。
鍵名可以使用整數和字符串來表示，值的類型可以是任意類型。
數組在 JS 中是方括號 [] 包裹起來的內容，數據結構為 [“java”, “javascript”, “vb”, …] 的索引結構。
在 JS 中，數組是一種比較特殊的數據類型，它也可以像對象那樣使用鍵值對，但還是索引使用得多。同樣，鍵名可以使用整數和字符串來表示，值的類型可以是任意類型。
3.JSON 與 JS 對象的關系：
很多人搞不清楚 JSON 和 Js 對象的關系，甚至連誰是誰都不清楚。其實，可以這么理解：
JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。
如：
var obj = {a: 'Hello', b: 'World'}; //這是一個對象，注意鍵名也是可以使用引號包裹的
var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串，本質是一個字符串
1
2
4.后臺返回json數據
一般來說，使用JsonObject來將Java類型數據轉換成Json類型，首先要下載該庫相關的jar包，下載地址如下：
json-jar包下載
JsonObject的使用：
后臺controller部分代碼:
JSONObject object = new JSONObject(); //創建Json對象
object.put("username", "張三"); //設置Json對象的屬性
object.put("password", "123456");
System.out.println(object.toString()); //調用toString方法將json對象轉換成json字符串
//把json數據返回給瀏覽器：
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代碼中接收Json數據：
假設result為瀏覽器得到的json數據，可以使用以下js代碼可以將json對象轉換為字符串。
比如：
通過$.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()函數
將返回的串轉化成可用的strig串，eval(data)，但是因為原串里面是以{}開始和結束的，會被認為是可執行方法，因此需要加上()包圍起來,最終形成：
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對象轉換為字符串
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);得到的結果會是
所以在這里stringfy()的作用是用于從一個對象解析出字符串
加上了var newData = JSON.stringify(result);這句，然后你再alert(newData);
得到的就會是你想要的結果，如下:
另外：
如果返回的json數據格式不是很規范的解決辦法：
判斷后臺返回的數據格式是否字符串，是則轉，不是則不轉？
var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content
1
總結：
前臺發送請求，并且設置數據為json格式‘
$.ajax({
url:"selectByid.",
datatype:'json',
data:{id:id}, // 發送數據
1
2
3
4
數據回調函數
success:function(data){
alert(data);
var json = eval("("+data+")");//將json類型字符串轉換為json對象
alert("hjf"+json.name);
1
2
3
4
給對應的input賦值：
$("#id").val(json.id),
$("#name").val(json.name),
$("#age").val(json.age);
1
2
3
后臺代碼：返回json數據
response.getWriter().print(str); //將數據返回前臺ajax
1
6.前端ajax接不到json解決？
在前臺：
async:false, //加上這個屬性就好了
1
7.返回的json字符串中有轉義符解決？
比如：
"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",}"
1
這樣我們我們使用JSON.parse(result) ，直接轉化為json的話是會報錯的。
解決方法：
我們先把轉義符用正則表達式去掉，
var string = result.replace("/\","");
var getDataArray = JSON.parse(string)
1
2
這樣就OK了，不過要注意有時候也是需要指定返回數據類型的
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
結果：
或者：
引入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
結果：
9.后臺對象轉換json數據返回給前臺
List集合轉換成json代碼：
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray2 = JSONArray.fromObject( list );
1
2
3
4
Map集合轉換成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
當把數據轉為json后，用如上的方法發送到客戶端。前端就可以取得json數據了。（可以參考最下面的實例）
10.后臺返回數據給前臺，json中文亂碼解決方法
在實際運用場景中，當前臺發起請求后，我們需要從后臺返回數據給前臺，這時，如果返回的數據中包含中文，則經常會出現在后臺查詢出來都是好好，但是傳輸回去就莫名的亂碼了，而且即使在 web.xml 中進行編碼過濾了，但還是亂碼。
解決辦法：
只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我們重復寫的麻煩，配置內容如下：
<!--自定義消息轉換器的編碼,解決后臺傳輸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 屬性默認找到 -->
<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
加上這段配置，保存重新運行，再次訪問，會發現，原先的中文亂碼都已經正常顯示了。
方法二：在后臺的方法映射添加：
@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)
11.Spring MVC返回json數據的方式
- 采用@ResponseBody注解
@ResponseBody 注解的作用是:
將controller的方法返回的對象通過適當的轉換器轉換為指定的格式之后，寫入到response對象的body區，通常用來返回JSON數據或者是XML數據，需要注意的呢，在使用此注解之后不會再走試圖處理器，而是直接將數據寫入到輸入流中，他的效果等同于通過response對象輸出指定格式的數據。
使用舉例：
使用@ResponseBody 注解返回響應體 直接將返回值序列化json
優點：不需要自己再處理
再舉例：
RequestMapping("/login")
@ResponseBody
public User login(User user){
return user;
}
1
2
3
4
5
使用@ResponseBody 注解返回響應體 直接將返回值序列化json。
User字段：userName pwd，那么在前臺接收到的數據為：’{“userName”:“xxx”,“pwd”:“xxx”}’，效果等同于如下代碼：
@RequestMapping("/login")
public void login(User user, HttpServletResponse response){
response.getWriter.write(JSONObject.fromObject(user).toString());
}
1
2
3
4
5
需要在springmvc的配置文件xml中添加：
<mvc:annotation-driven/>
1
- 采用工具類，進行json格式轉換帶回
JSON-lib包是一個beans,collections,maps,java arrays 和XML和JSON互相轉換的包。在本例中，我們將使用JSONObject類創建JSONObject對象，然后我們打印這些對象的值。為了使用JSONObject對象，我們要引入"net.sf.json"包。為了給對象添加元素，我們要使用put()方法。
要使程序可以運行必須引入JSON-lib包，JSON-lib包同時依賴于以下的JAR包：
commons-lang.jar
commons-beanutils.jar
commons-collections.jar
commons-logging.jar
ezmorph.jar
json-lib-2.2.2-jdk15.jar
1
2
3
4
5
6
效果：
工具類：
ResponseUtil.java
package com.zout.utils;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/*
@class_name：ResponseUtil
@param: EasyUi-響應工具類
@return: 返回字符串格式數據、result是JSONObject對象（json對象）
@author:Zoutao
@createtime:2018年3月8日
/
public class ResponseUtil {
public static void write(HttpServletResponse response, Object result)
throws Exception {
response.setContentType("text/html;charset=utf-8");
response.addHeader("Access-Control-Allow-Origin", "");
PrintWriter out = response.getWriter();
out.println(result.toString());
System.out.println("帶回的json字符串為："+result.toString()+"類型為："+result.getClass().getName());
out.flush();
out.close();
}
public static void main(String[] args) throws Exception {
/在web運用控制層中調用如下：/
JSONObject result = new JSONObject(); //創建json對象
JSONArray jsonArray = JSONArray.fromObject("name:zhangsan"); //字符串轉為json數組
result.put("rows", jsonArray); //放入json數組中，并起個名字
HttpServletResponse response = null; //jsp的response對象
ResponseUtil.write(response, result); //result寫入response帶回前臺，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
后臺具體調用:
JSONObject result = new JSONObject();
if (resultTotal > 0) { //處理結果
System.out.println("操作成功。");
result.put("success",true)
result.put("message","操作成功"); //消息語句
} else {
System.out.println("操作失敗。");
result.put("success", false);
result.put("message","操作失敗");
}
ResponseUtil.write(response,result); //帶回字符串+狀態碼
return null;
1
2
3
4
5
6
7
8
9
10
11
12
圖：
后臺已經通過工具類封裝為json字符串了，使用response帶回需要的數據，使用result帶回狀態字符串或狀態碼。
前臺：
這是當成返回一個json字符串，然后直接采取字符串截取的方式，取出消息語句message等消息。
這是另外一種寫法：就是解析傳回來的json字符串我js的對象，然后按照key/value的取值。
function (data) {
var data=eval("("+data+")"); //解析json
//alert(data.message)
$.messager.show({
title:'消息',
msg:data.message, //按key取值
timeout:1000,
showType:'slide',
height:120,
width:200
});
});
1
2
3
4
5
6
7
8
9
10
11
12
推薦這種方式。
效果圖：
以上都是后臺返回json數據給前臺和前臺解析json數據的一些總結，還有json數據的封裝，工具類的使用等等，東西有點復雜有點多，挑選自己需要的地方即可。
另外的一些常用的web開發json：
Json–Java數據類型對照表（映射）表
