基于jQuery的AJAX和SON的实例.doc

基于jQuery的AJAX和JSON的实例 通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。 我们先来看一下html模板： ??table?id=datas?border=1?cellspacing=0?style=border-collapse:?collapse????????????????tr????????????????????th????????????????????????订单ID/th????????????????????th????????????????????????客户ID/th????????????????????th????????????????????????雇员ID/th????????????????????th????????????????????????订购日期/th????????????????????th????????????????????????发货日期/th????????????????????th????????????????????????货主名称/th????????????????????th????????????????????????货主地址/th????????????????????th????????????????????????货主城市/th????????????????????th????????????????????????更多信息/th????????????????/tr????????????????tr?id=template????????????????????td?id=OrderID????????????????????/td????????????????????td?id=CustomerID????????????????????/td????????????????????td?id=EmployeeID????????????????????/td????????????????????td?id=OrderDate????????????????????/td????????????????????td?id=ShippedDate????????????????????/td????????????????????td?id=ShippedName????????????????????/td????????????????????td?id=ShippedAddress????????????????????/td????????????????????td?id=ShippedCity????????????????????/td????????????????????td?id=more????????????????????/td????????????????/tr????????????/table一定要注意的就是里面所有的id属性，这个是一个关键。再来看一下AJAX请求和绑定数据的代码 ?$.ajax({????????????type:?get,//使用get方法访问后台????????????dataType:?json,//返回json格式的数据????????????url:?BackHandler.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.订单ID);????????????????????row.find(#CustomerID).text(n.客户ID);????????????????????row.find(#EmployeeID).text(n.雇员ID);??????