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

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

效果:

 

 

MAIL: [email protected]

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



JSON(02)JQuery中JSON的解析与应用,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。