JSON(02)JQuery中JSON的解析与应用

浏览数：64 / 时间：2015年06月09日

用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使用的一个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JSON DEMO</title>

<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 += "<br/>"+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 += "<br/>"+"length="+jsonObj.fileversion.length;	
		$.each(jsonObj.fileversion, function (n, value) {  		
             info += "<br/> version:"+jsonObj.fileversion[n].version + ‘ : size:‘ + jsonObj.fileversion[n].size;
	    });  	
	    $(‘#JsonInfo2_div‘).html(info);			
        $(‘#JsonDemo21_div‘).html(JSON.stringify(jsonObj));				
   }
      
    demo1();
   
    demo2();
			
 });
</SCRIPT>
	
</head>
<body>

<h2> JSON DEMO</h2>
<br/>

demo1:<br/>
<P id="JsonInfo_div" style=‘color:red;padding-left:65px;‘></P>

<br/>
demo2:<br/>
<P id="JsonDemo21_div" style=‘color:blue;padding-left:65px;‘></P>
<br/>
<P id="JsonInfo2_div" style=‘color:blue;padding-left:65px;‘></P>
<br/>


</body>
</html>

效果: