後臺返回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"}

這很容易理解，等價於這條 JavaScript 語句：

{firstName : "Json"}

物件在 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 字串，本質是一個字串

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());

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);
});
直接這樣寫的話，介面會alert提示undefined，所以應該是沒能正確解析返回的字串。

解決方案：
1、 需要用eval函式將返回的串轉化成可用的strig串，eval(data)，但是因為原串裡面是以{}開始和結束的，會被認為是可執行方法，因此需要加上()包圍起來，var jsonobj=eval("("+data+")")，
然後再alert(“ID:” + jsonobj.id + “\nName:” + jsonobj.name);就能正常顯示了。

2、獲取的時候就直接表示返回的是json格式，用 $.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);

}});

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}, // 傳送資料

2. 資料回撥函式
   success:function(data){
   alert(data);
   var json = eval("("+data+")");//將json型別字串轉換為json物件
   alert(“hjf”+json.name);

3. 給對應的input賦值：
   $("#id").val(json.id),
   $("#name").val(json.name),
   $("#age").val(json.age);

4. 後臺程式碼：返回json資料

response.getWriter().print(str); //將資料返回前臺ajax

6.前端ajax接不到json解決？

在前臺：
async:false, //加上這個屬性就好了

7.返回的json字串中有轉義符解決？

比如：

"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",\}"

這樣我們我們使用JSON.parse(result)直接轉化為json的話是會報錯的。

解決方法：
我們先把轉義符用正則表示式去掉，

var string = result.replace("/\\","");
var getDataArray = JSON.parse(string);

這樣就OK了，不過要注意有時候也是需要指定返回資料型別的
dataType:“json”

8.使用其他的json依賴包方式：

引入阿里巴巴的json依賴包：

<dependency>
 <groupId>com.alibaba</groupId>
 <artifactId>fastjson</artifactId>
 <version>1.2.9</version>
</dependency>

模擬後臺：

String params="{\"channelCode\":\"bbb\",\"accountNo\":\"121300000932\",\"message\":\"字元資訊解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.parseObject(params);
System.out.println(pa.getString("message"));

結果：

或者：
引入net.sf.json-lib依賴包：

<dependency>
  <groupId>net.sf.json-lib</groupId>
  <artifactId>json-lib</artifactId>
  <version>2.4</version>		 
  <classifier>jdk15</classifier>
</dependency>

後臺：

String params="{\"channelCode\":\"ccy\",\"accountNo\":\"121300000932\",\"message\":\"字元資訊解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.fromObject(params);
String accountNo=pa.getString("accountNo");
System.out.println(accountNo);

結果：

9.後臺物件轉換json資料返回給前臺

List集合轉換成json程式碼：

List list = new ArrayList();
　　list.add( “first” );
　　list.add( “second” );
　　JSONArray jsonArray2 = JSONArray.fromObject( list );

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);
　
或者在專案中加入引入JSON-lib包，JSON-lib包同時依賴於以下的JAR包：下載地址:http://json-lib.sourceforge.net/
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
用法同上
　　JSONObject jsonObject = JSONObject.fromObject(message);
　　getResponse().getWriter().write(jsonObject.toString());
當把資料轉為json後，用如上的方法傳送到客戶端。前端就可以取得json資料了。（可以參考最下面的例項）

10.後臺返回資料給前臺，json中文亂碼解決方法

在實際運用場景中，當前臺發起請求後，我們需要從後臺返回資料給前臺，這時，如果返回的資料中包含中文，則經常會出現在後臺查詢出來都是好好，但是傳輸回去就莫名的亂碼了，而且即使在 web.xml 中進行編碼過濾了，但還是亂碼。

解決辦法：
只需要在 spring-mvc.xml 配置檔案中配置一次就好，省去了我們重複寫的麻煩，配置內容如下：

<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>

’
加上這段配置，儲存重新執行，再次訪問，會發現，原先的中文亂碼都已經正常顯示了。

方法二：在後臺的方法對映新增：

@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)

11.Spring MVC返回json資料的方式

1. 採用@ResponseBody註解

@ResponseBody 註解的作用是 將controller的方法返回的物件通過適當的轉換器轉換為指定的格式之後，寫入到response物件的body區，通常用來返回JSON資料或者是XML資料，需要注意的呢，在使用此註解之後不會再走試圖處理器，而是直接將資料寫入到輸入流中，他的效果等同於通過response物件輸出指定格式的資料。

使用舉例：

使用@ResponseBody 註解返回響應體 直接將返回值序列化json
優點：不需要自己再處理

再舉例：

RequestMapping("/login")
　　@ResponseBody
　　public User login(User user){
　　　　return user;
　　}

使用@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());
}

需要在springmvc的配置檔案xml中新增：
<mvc:annotation-driven/>  

2. 採用工具類，進行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

效果：

工具類：
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按名字拿取。
	}
}

後臺具體呼叫:

	JSONObject result = new JSONObject();
			if (resultTotal > 0) {		//處理結果
				System.out.println("操作成功。");
				result.put("success",true);
			} else {
				System.out.println("操作失敗。");
				result.put("success", false);
			}
			ResponseUtil.write(response,result); //帶回字串+狀態碼
			return null;

圖：

後臺已經通過工具類封裝為json字串了，使用response帶回需要的資料，使用result帶回狀態字串或狀態碼。

前臺：

---

以上都是後臺返回json資料給前臺和前臺解析json資料，還有json資料的封裝，工具類的使用等等，東西有點複雜有點多，挑選自己需要的地方即可。