笔者对JSON对象代码进行说明介绍
创始人
2024-06-19 08:50:33
0

这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明,下面进行JSON对象代码说明:

  1. > 
  2.  xmlns="http://www.w3.org/1999/xhtml"> 
  3.  
  4. </FONT></STRONG>test2<STRONG><FONT color=#006699> 
  5.  
  6.  language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"> 
  7.  
  8.  language="javascript" type="text/javascript" src="js/PageDate.js"> 
  9.  
  10.  
  11.  
  12.  
  13.    
     
  14.      /> 
  15.      id="first" type="button" value=" << " /> id="previous" type="button" 
  16. value=" < " /> id="next" type="button" value=" > " /> id="last" type="button" 
  17.  value=" >> " /> 
  18.       id="pageinfo"> 
  19.      id="datas"> 
  20.  id="template"> 
  21.   id="OrderID"> 
  22.   订单ID  
  23.  /  
  24.   id="CustomerID"> 
  25.  客户ID  
  26.   
  27.   id="EmployeeID"> 
  28.  雇员ID  
  29.  /  
  30.   id="OrderDate"> 
  31.  订购日期  
  32.  /  
  33.   id="ShippedDate"> 
  34.  发货日期  
  35.  /  
  36.   id="ShippedName"> 
  37.  货主名称  
  38.  /  
  39.   id="ShippedAddress"> 
  40.  货主地址  
  41.  /  
  42.   id="ShippedCity"> 
  43.  货主城市  
  44.  /  
  45.   id="more"> 


注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。 对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了。#t#

因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:

  1.  type: "get",//使用get方法访问后台  
  2.  dataType: "json",//返回json格式的数据  
  3.  url: "Handler.ashx",//要访问的后台地址  
  4.  data: "pageIndex=" + pageIndex,//要发送的数据  
  5.  complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示  
  6.  success: function(msg){//msg为返回的数据,在这里做数据绑定  
  7.  var data = msg.table;  
  8.  $.each(data, function(i, n){  
  9. var row = $("#template").clone();  
  10. row.find("#OrderID").text(n.OrderID);  
  11. row.find("#CustomerID").text(n.CustomerID);  
  12. row.find("#EmployeeID").text(n.EmployeeID);  
  13. row.find("#OrderDate").text(ChangeDate(n.OrderDate));  
  14. if(n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate));  
  15. row.find("#ShippedName").text(n.ShipName);  
  16. row.find("#ShippedAddress").text(n.ShipAddress);  
  17. row.find("#ShippedCity").text(n.ShipCity);  
  18. row.find("#more").html(" href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+"> More");  
  19. row.attr("id","ready");//改变绑定好数据的行的id  
  20. row.appendTo("#datas");//添加到模板的容器中  
  21.  });  
  22.  $("[@id=ready]").show();  
  23.  SetPageInfo();  
  24.  }  
  25. });  
  26. }  
  27.  
  28. function ChangeDate(date)  
  29. {  
  30.  return date.replace("-","/").replace("-","/");  

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON对象就提供了一个不超过3k的脚本库。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...