jQuery内置的AJAX功能和JSON的使用实例


Posted in Javascript onJuly 27, 2014

通过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转化成JSON数据格式传回来就完了,不过后台用了一些分页和缓存的方法,希望对初学者有一些帮助。

Javascript 相关文章推荐
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
layui文件上传实现代码
May 20 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 #Javascript
jquery JSON的解析方式示例介绍
Jul 27 #Javascript
jQuery提交多个表单的小技巧
Jul 27 #Javascript
用javascript对一个json数组深度赋值示例
Jul 27 #Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 #Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 #Javascript
jquery 取子节点及当前节点属性值
Jul 25 #Javascript
You might like
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
AngularJS基础知识
2014/12/21 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
Python生成随机数的方法
2014/01/14 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python做接口测试的必要性
2019/11/20 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
总经理助理工作职责
2014/02/06 职场文书
献爱心倡议书
2014/04/14 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2015年女职工工作总结
2015/05/15 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers