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"));
}