基于jQuery的创建交互式、快速动态网页应用的网页开发技术和JSON实现纯超文本标记语言数据模板

通过jQuery内置的创建交互式、快速动态网页应用的网页开发技术功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的超文本标记语言模板上，直接在页面上显示。

我们先来看一下超文本标记语言模板：

表id='datas '边框='1 '单元格间距='0 '样式='边框-折叠：折叠' trth订单身份证/第客户身份证/第雇员身份证/第订购日期/th发货日期/th货主名称/th货主地址/th货主城市/th更多信息/th/trtr id=' template ' TD id=' order id '/tdtd id=' CustomerID '/tdtd id=' EmployeeID '/tdtd id='订单日期'/tdtd id='发货日期'/tdtd id='发货名称'/tdtd id='发货地址'/tdtd id='发货城市'/tdtd id='更多'/TD/tr/table一定要注意的就是里面所有的编号属性，这个是一个关键。再来看一下创建交互式、快速动态网页应用的网页开发技术请求和绑定数据的代码。

$.ajax({type: 'get '，//使用得到方法访问后台dataType: 'json '，//返回json格式的数据url: 'BackHandler.ashx '，//要访问的后台地址data: 'pageIndex=' pageIndex，//要发送的数据完成： function(){ $(“# load”)).hide()；}，//AJAX请求完成时隐藏装货提示成功：函数（消息){//消息为返回的数据，在这里做数据绑定var data=msg.table$。每个（数据，函数(I，n){var row=$('#template ').clone()；row.find('#OrderID ').文本(n订单ID)；row.find('#CustomerID ').文本(n客户ID)；row.find('#EmployeeID ').文本(n雇员ID)；row.find('#OrderDate ').文本（更改日期(n订购日期));if(n .发货日期！==未定义)行。查找(' #发货日期').文本（更改日期(n发货日期));row.find('#ShippedName ').文本(n货主名称);row.find('#ShippedAddress ').文本(n货主地址);row.find('#ShippedCity ').文本(n货主城市);row.find('#more ').html('a href=OrderInfo.aspx？id=' n .订单ID ' page index=' page index ' More/a ')；row.attr('id '，' ready ')；//改变绑定好数据的行的idrow。appendo(' # datas ')；//添加到模板的容器中});这个是jQuery的创建交互式、快速动态网页应用的网页开发技术方法，返回数据并不复杂，主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个var row=$("#template ").克隆();先把模板复制一份，接下来row.find("#OrderID ").文本(n订单ID)；表示找到id=OrderID的标记，设置它的innerText为相应的数据，当然也可以设置为超文本标记语言格式的数据。或者是通过外部的函数把数据转换成需要的格式，比如这里row.find("#OrderDate ").文本（更改日期(n订购日期));有点服务器控件做模板绑定数据的感觉。

所有的这些，都是放在一个静态的页面里，只通过创建交互式、快速动态网页应用的网页开发技术方法从后台获取数据，所有超文本标记语言代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML L1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title test1/title script language=' JavaScript ' type=' text/JavaScript ' src=' http 3360 js/jquery-latest。打包.订单身份证/第客户身份证/第雇员身份证/第订购日期/th发货日期/th货主名称/th货主地址/th货主城市/th更多信息/th/trtr id=' template ' TD id=' order id '/tdtd id=' CustomerID '/tdtd id=' EmployeeID '/tdtd id='订单日期'/tdtd id='发货日期'/tdtd id='发货名称'/tdtd id='发货地址'/tdtd id='发货城市'/tdtd id=' more '/TD/tr/table/div id=' load ' style=' left : 0px；绝对位置：top: 0px背景-颜色：红色装货./divinput type=' hidden ' id='页数'/div/body/HTMlPageDATa。射流研究…就是包括上面创建交互式、快速动态网页应用的网页开发技术请求和绑定数据代码的js，整个页面连形式都不用，这样做有什么好处呢。再看下面一个模板

ul id=' datas ' Li id=' template ' Span id=' OrderID ' fsdfasdf/Span Span id=' CustomerID '/Span Span id=' EmployeeID '/Span Span id=' order date '/Span id=' shipped date '/Span id=' shipped name '/Span id=' shipped address '/Span id=' shipped city '/Span id=' more '/Span/Li/ul仍然要注意id属性。看到这里，你应该明白，不管是什么样的表达式，只要id属性相同，就可以将数据绑定到对应的位置。这样，我们这些做程序的人就不会因为美工的修改而修改代码，美工只需要做html，不需要为服务器控件做模板(但是我之前没有遇到过这样的美工，所以在美工设计好之后我会把它改成服务器控件的模板)。

先简单说一下AJAX请求的背景，使用Access的Northwind数据库，将订单表放在DataTable中，然后通过DataTable 2JSON(www.baidu.com)转换成JSON数据格式发送回去。不过后台使用了一些分页和缓存的方法，希望对初学者有所帮助。

test.htm