基于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 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
js实现异步循环实现代码
Feb 16 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 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之第十天
2006/10/09 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP中读写文件实现代码
2011/10/20 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python 全文检索引擎详解
2017/04/25 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python 处理图片像素点的实例
2019/01/08 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
ddl,dml和dcl的含义
2016/05/08 面试题
大学生职业生涯规划书范文
2014/01/04 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
食品安全承诺书
2014/05/22 职场文书
检讨书之工作不认真
2019/08/14 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Python编写nmap扫描工具
2021/07/21 Python
Python中的 enumerate和zip详情
2022/05/30 Python