JSON(02)JQuery中JSON的解析與應用

用JQuery做前端頁面與背景程式互動時，JSON起的作用太大了，記錄JQuery與之相關的一些東西.

與JSON處理相關的幾個函數:
1.將字串轉換為JSON對象
a.JavaScript通過eval來轉換，但這種方式不安全,不推薦使用。
var jsonObj=eval(jsonStr);

b.JSON.parse方式,但ie6,ie7不支援，需另外去http://www.json.org/js.html下載一個js擴充才可以。
var jsonObj=JSON.parse(jsonStr);

c.JQuery通過parseJSON函數，更安全
var jsonObj=JQuery.parseJSON(jsonStr);

2.將JSON對象轉為字串
var jsonStr = JSON.stringify(jsonObj);

3. getJSON()，這個函數通過get請求得到json資料
jQuery.getJSON( url, data, callback )
·url用於提供json資料的地址頁
data(Optional)用於傳送到伺服器的鍵值對
·callback(Optional)回呼函數，json資料請求成功後的處理函數
具體參考:
http://www.w3school.com.cn/jquery/ajax_getjson.asp
4..GET,.POST都可以直接傳送或接收JSON字串。
....

JSON展示:

例1.

[{ "ret": "c: /tmp/11gR2", "type": "DIR"},{ "ret": "c: /tmp/xcl.log", "type": "FILE"},{ "ret": "c: /tmp/soft", "type": "DIR"}]

圖形化展開後的視圖:

{"name":"xcl.log","type":"FILE","fileversion":[
{"version":1,"backupTime":100,"createtime":80,"modifytime":70,"size":"10m"},
{"version":2,"backupTime":120,"createtime":50,"modifytime":80,"size":"50m"}]}

展示JSON使用的一個例子:

JSON DEMO<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript">   $(document).ready(function(){      function demo1()   {         //字串  var jsonStr = '[{ "ret": "c: /tmp/11gR2", "type": "DIR"},{ "ret": "c: /tmp/xcl.log", "type": "FILE"},{ "ret": "c: /tmp/soft", "type": "DIR"}]';          //將字串轉換為JSON對象  //JavaScript通過eval來轉換，但這種方式不安全,不推薦使用。  // var jsonObj=eval(jsonStr);    //JSON.parse方式,但ie6,ie7不支援，需另外去http://www.json.org/js.html下載一個js擴充才可以。  var jsonObj=JSON.parse(jsonStr);    //JQuery通過parseJSON函數，更安全  var jsonObj=jQuery.parseJSON(jsonStr);   //使用each進行遍曆JSON數組    var info = "length="+jsonObj.length;  $.each(jsonObj, function (n, value) {       info += "
"+value.type + ' : ' + value.ret  });      $('#JsonInfo_div').html(info);     }      function demo2()   {           //直接將一個複雜的JSON賦給JS變數        var jsonObj ={"name":"xcl.log","type":"FILE","fileversion":[{"version":1,"backupTime":100,"createtime":80,"modifytime":70,"size":"10m"},{"version":2,"backupTime":120,"createtime":50,"modifytime":80,"size":"50m"}]}    var info = "name="+jsonObj.name;        info += "
"+"length="+jsonObj.fileversion.length;$.each(jsonObj.fileversion, function (n, value) {               info += "
 version:"+jsonObj.fileversion[n].version + ' : size:' + jsonObj.fileversion[n].size;    });      $('#JsonInfo2_div').html(info);        $('#JsonDemo21_div').html(JSON.stringify(jsonObj));   }          demo1();       demo2(); });</script> JSON DEMO
demo1:

demo2:

效果:

MAIL: xcl_168@aliyun.com

BLOG: http://blog.csdn.net/xcl168