基于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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
Vuex实现数据增加和删除功能
Nov 11 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
php中JSON的使用方法
2015/04/30 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
python2和python3的输入和输出区别介绍
2018/11/20 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python将时分秒转换成秒的实例
2019/12/07 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
学习退步检讨书
2014/09/28 职场文书
委托书格式要求
2015/01/28 职场文书
离职告别感言
2015/08/04 职场文书
《藏戏》教学反思
2016/02/23 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript