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 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
JS input 数字验证代码
Jul 30 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
js实现文章目录索引导航(table of content)
May 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
二级域名转向类
2006/11/09 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
javascript模块化简单解析
2016/04/07 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python线程指南分享
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python os库常用操作代码汇总
2020/11/03 Python
python Xpath语法的使用
2020/11/26 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
精伦电子Java笔试题
2013/01/16 面试题
社区庆中秋节活动方案
2014/02/07 职场文书
2016年寒假生活小结
2015/10/10 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
Redis安装启动及常见数据类型
2021/04/14 Redis
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python