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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python3读写ini配置文件的示例
2020/11/06 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
科室工作的个人自我评价
2013/10/30 职场文书
管理心得体会
2013/12/28 职场文书
企业宣传工作方案
2014/06/02 职场文书
影子教师研修方案
2014/06/14 职场文书
党员演讲稿
2014/09/04 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
中秋节寄语2015
2015/03/24 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers