基于jQuery的AJAX和JSON实现纯html数据模板


Posted in Javascript onAugust 09, 2016

通过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);
row.find("#OrderDate").text(ChangeDate(n.订购日期));
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
row.find("#ShippedName").text(n.货主名称);
row.find("#ShippedAddress").text(n.货主地址);
row.find("#ShippedCity").text(n.货主城市);
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>"); 
row.attr("id","ready");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});

这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $(“#template”).clone();”先把模板复制一份,接下来row.find(“#OrderID”).text(n.订单ID);,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里row.find(“#OrderDate”).text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。

所有的这些,都是放在一个静态的页面里,只通过AJAX方法从后台获取数据,所有html代码如下:

!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>test1</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>
<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>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
LOADING....
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
</html>

PageData.js就是包括上面AJAX请求和绑定数据代码的js,整个页面连form都不用,这样做有什么好处呢。再看下面一个模板

<ul id="datas">
<li id="template">
<span id="OrderID">
fsdfasdf
</span>
<span id="CustomerID">
</span>
<span id="EmployeeID">
</span>
<span id="OrderDate">
</span>
<span id="ShippedDate">
</span>
<span id="ShippedName">
</span>
<span id="ShippedAddress">
</span>
<span id="ShippedCity">
</span>
<span id="more">
</span>
</li>
</ul>

还是要注意id属性。大家看到这里应该明白了,不管用什么样的表现形式,只要id属性相同,就可以把数据绑定到对应的位置。这样的话,我们这些做程序的就不会因为美工的修改而修改代码了,而且美工也只要做出html就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成服务器控件的模板)。

再简单说一下AJAX请求的后台,用的是Access的Northwind数据库,把订单表放到DataTable里,然后通过DataTable2JSON(www.baidu.com)转化成JSON数据格式传回来就完了,不过后台用了一些分页和缓存的方法,希望对初学者有一些帮助。

test.htm

基于jQuery的AJAX和JSON实现纯html数据模板

基于jQuery的AJAX和JSON实现纯html数据模板

Javascript 相关文章推荐
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 #Javascript
AngularJS利用Controller完成URL跳转
Aug 09 #Javascript
JavaScript实现广告弹窗效果
Aug 09 #Javascript
谈谈JavaScript中的几种借用方法
Aug 09 #Javascript
Backbone View 之间通信的三种方式
Aug 09 #Javascript
Backbone中View之间传值的学习心得
Aug 09 #Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python如何telnet到网络设备
2021/02/18 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
运动会开幕式邀请函
2014/02/03 职场文书
承诺书怎么写
2014/03/26 职场文书
素质教育标语
2014/06/27 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
教师创先争优承诺书
2015/04/27 职场文书
体育委员竞选稿
2015/11/21 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python