这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明,下面进行JSON对象代码说明:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>test2</title>
- <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
- <script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
- </head>
- <body>
- <div>
- <div>
- <br />
- <input id="first" type="button" value=" << " /><input id="previous" type="button"
- value=" < " /><input id="next" type="button" value=" > " /><input id="last" type="button"
- value=" >> " />
- <span id="pageinfo"></span>
- <ul id="datas">
- <li id="template">
- <span id="OrderID">
- 订单ID
- </span>/
- <span id="CustomerID">
- 客户ID
- </span>
- <span id="EmployeeID">
- 雇员ID
- </span>/
- <span id="OrderDate">
- 订购日期
- </span>/
- <span id="ShippedDate">
- 发货日期
- </span>/
- <span id="ShippedName">
- 货主名称
- </span>/
- <span id="ShippedAddress">
- 货主地址
- </span>/
- <span id="ShippedCity">
- 货主城市
- </span>/
- <span id="more">
注:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变。 对于服务器返回的JSON字符串,如果jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不需要eval()方法了。#t#
因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为例说明数据处理方法:
- type: "get",//使用get方法访问后台
- dataType: "json",//返回json格式的数据
- url: "Handler.ashx",//要访问的后台地址
- data: "pageIndex=" + pageIndex,//要发送的数据
- complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
- success: function(msg){//msg为返回的数据,在这里做数据绑定
- var data = msg.table;
- $.each(data, function(i, n){
- var row = $("#template").clone();
- row.find("#OrderID").text(n.OrderID);
- row.find("#CustomerID").text(n.CustomerID);
- row.find("#EmployeeID").text(n.EmployeeID);
- row.find("#OrderDate").text(ChangeDate(n.OrderDate));
- if(n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate));
- row.find("#ShippedName").text(n.ShipName);
- row.find("#ShippedAddress").text(n.ShipAddress);
- row.find("#ShippedCity").text(n.ShipCity);
- row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+"> More</a>");
- row.attr("id","ready");//改变绑定好数据的行的id
- row.appendTo("#datas");//添加到模板的容器中
- });
- $("[@id=ready]").show();
- SetPageInfo();
- }
- });
- }
- function ChangeDate(date)
- {
- return date.replace("-","/").replace("-","/");
- }
这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串(可能是js脚本)的,这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库,比如JSON对象就提供了一个不超过3k的脚本库。