1. 程式人生 > >json在前後端資料互動中的應用

json在前後端資料互動中的應用

一.什麼是json?

json本來是javascript裡的內容,有時後端要傳各種各樣的資料格式來適應前端,所以需要用到json來轉換,用它來表示各種各樣複雜的資料,如物件,陣列,集合,以及集合的集合等資料。
先來了解json是什麼,json是一種輕量級的前端後端以及網路傳輸的資料交換格式,就是一串字串,只不過元素會使用特定的符號標註。 {} 雙括號表示物件,[] 中括號表示陣列,”” 雙引號內是屬性或值,: 冒號表示後者是前者的值(這個值可以是字串、數字、也可以是另一個數組或物件)。也就是說在後端可以把一個字串,然後通過json來轉換成特定的字串傳到前端去。

二.為什麼要用json?

1.資料格式比較簡單, 易於讀寫, 格式都是壓縮的, 佔用頻寬小,其可讀性也不錯,基本具備了結構化資料的性質。

2.易於解析這種語言, 客戶端JavaScript可以簡單的通過eval()進行JSON資料的解析,通過遍歷陣列以及訪問物件屬性來獲取資料,

3.因為JSON格式能夠直接為伺服器端程式碼使用, 大大簡化了伺服器端和客戶端的程式碼開發量, 且易於維護,語言無關,任何語言都能輕鬆搞它,型別安全,值是有型別的,比如整數、字串、布林等。

三.一些常見的json格式

1.一個JSON物件——JSONObject

簡單點的:var json={"name":"張三" , "age"
:18 }; 複雜一點的:var json={"name":"張三", "age"=18"address":{"street":"湖南", "city":長沙","country":"中國"}};

2.一個JSON陣列——JSONArray

簡單點的:
var json=[{"name":"張三" , "age":18 },{"name":"李四" , "age":20 }];

複雜一點的:
[
{"name":"張三", "age"=18,  "address":{"street":"湖南", "city":"長沙","country":"中國"}},

{"name":"李四"
, "age"=20, "address":{"street":"湖南", "city":"張家界","country":"中國"}} ]

3.還有一種結構

var json={"abc":[{"name":"txt1"},{"name","txt2"}]};
//這裡的json.abc是一個數組,陣列是由2個子json組成的

遍歷(後面不在講這種結構)
for(var i=0;i<json1.abc.length;i++){alert(json1.abc[i].name);}

裡面的是一個物件{},如果是多個物件,則用逗號間隔,即{},{},這樣就組成了一個物件序列,為了辨別開始和結束,則需要加上[]才能進行傳遞,則實際傳遞的形式應該是[{},{}],如果只要傳遞一個物件,則{}的形式就可以了。

四.json在前端(js)應用

後端將資料處理成json格式,前端就通過ajax來接收資料,並eval()或者json.prase(data)解析,迴圈遍歷,展現在頁面上。

$  .ajax({
                        url : "myfileAction",
                        dataType : "json",
                        type : "post",
                        success : function(data) {
                        }
                        });

第一步,接收資料
用ajax來接收後端發來的資料,簡單說下ajax,ajax是一種用於快速建立動態網頁的技術。通過在後臺與伺服器進行少量資料交換,ajax就可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。而傳統的網頁(不使用ajax)如果需要更新內容,必須過載整個網頁面。
type: “POST”, //請求的方式,也有get請求
url: “myfileAction”, //請求地址,後臺提供的,填寫具體action,也就是struts.xml檔案中action名字。
data: {name:name},//data是傳給後臺的json欄位,後臺需要哪些就傳入哪些,這裡是接收資料,所以可以不用寫。
dataType: “json”, //json格式,後臺返回的資料為json格式的。

第二步,解析資料
前後臺傳輸的時候其實是字串,解析是把json字串重新變成json型別的物件。

json字串轉換成json物件

var obj = eval('(' + data + ')');
或者 var obj = JSON.parse(data);  

區別:eval方法不會去檢查給的字串時候符合json的格式,同時如果給的字串中存在js程式碼eval也會一併執行。相比而言eval()不安全,建議用JSON.parse。

json物件轉為json字串

var name = JSON.stringify(person);

前端傳入後臺的應該是一個json格式的字串,而不是一個json物件,所以這個也有用的。
講到這裡簡單提下發送資料吧。

<script type="text/javascript">  
    $(document).ready(function(){  
        var saveDataAry=[];  
        var data1={"userName":"zhangsan","address":"bj"};  
        var data2={"userName":"lisi","address":"nj"};  
        saveDataAry.push(data1);  
        saveDataAry.push(data2);         
        $.ajax({ 
            type:"POST", 
            url:"user/saveUser", 
            dataType:"json",      
            contentType:"application/json",               
            data:JSON.stringify(saveData), 
            success:function(data){ 

            } 
         }); 
    });  
</script>

ajax請求的時候也要指定dataType:“json”,contentType:”application/json” 這樣就可以輕易的將一個物件或者List傳到後端。

第三步,資料遍歷
可以通過jQuery的$.each()方法遍歷輸出,舉個例子

var arr = [{ name: "john", lang: "js" },{ name: "張三", lang: "ext" }];   
  $.each( arr, function(index, content)  
  {   
   alert( "the man's no. is: " + index + ",and " + content.name + " is learning " + content.lang );   
  });  

如果宣告的是字串,var arr=’[]’這樣型別,那麼遍歷的時候應該先用json.parse()或者jquery的方法$.parseJSON將字串轉化為物件。

還有一種是for迴圈遍歷

  for(var i=0; i<arr.length; i++)  
  {  
     alert(arr[i].name+" " + arr[i].value)  
  }  
  //取arr數組裡一個叫name的值,比如上面name後面值是張三,就取出張三

五.json在後端上的應用

在後端action裡要匯入 net.sf.json.JSONObject這個包。

第一步,有幾種後端資料封裝成json資料格式

1.List集合轉換成json程式碼
 List list = new ArrayList();
 list.add( “first” );
 list.add( “second” );
 JSONArray jsonArray = JSONArray.fromObject( list );
2. 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);
3.Bean轉換成json程式碼
  JSONObject jsonObject = JSONObject.fromObject(new JsonBean());
4. 陣列轉換成json程式碼
 boolean[] boolArray = new boolean[] { true, false, true };
  JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
5. 一般資料轉換成json程式碼
JSONArray jsonArray =JSONArray.fromObject([‘json’,’is’,’easy’]” );
6.用json put方法
JSONObject json=new JSONObject();
json.put(“name”, “張三”);
json.put(“age”, 18);

第二步,給你一個Struts 2的struts.xml中配置json型別result

<package name="json" extends="json-default" >  

  <action name="***Action"  
   class="action.UserAction" method="add">  
   <result type="json">  
                <param name="root">result</param>  
        </result>  
    </action>  
</package>

<param> 這個標籤是設定引數的,對於java程式來說,這個標籤就相當於定義一個root 變數,將其賦值為map ,前臺可以獲取使用root這個引數值。
所以action裡要有get,setresult方法,把json字串值給reslut setResult(json.toString());

接收前端提交的資料

String data = request.getParameter("data");
 JSONArray json=JSONArray.fromObject(data);
JSONObject jsonOne;
  Map<String,String> map=null;

for(int i=0;i<json.size();i++){
           updataMap = new HashMap<String,String>();
           jsonOne = json.getJSONObject(i); 
           map.put("name", (String) jsonOne.get("name"));
           map.put("age", (String) jsonOne.get("age"));
  }