基于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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
自制简易打赏功能的实例
Sep 02 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
vuex入门最详细整理
Mar 04 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的输出:缓存并压缩动态页面
2013/06/11 PHP
javascript跨域刷新实现代码
2011/01/01 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python之文件读取一行一行的方法
2018/07/12 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
运动会跳远加油稿
2014/02/20 职场文书
小学校长汇报材料
2014/08/20 职场文书
委托书的写法
2014/09/16 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android