基于jQuery的AJAX和JSON的实例
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
<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>
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.订购日期));有点服务器控件做模板绑定数据的感觉。
<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都不用,这样做有什么好处呢。再看下面一个模板
<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就可以了,不需要为服务器控件做模板(不过我还没遇到过这样的美工,都是美工设计好了我来改成 服务器控件的模板)。
全部例子到http://files.cnblogs.com/fredlau/JSON.rar下载
参考资料: http://files.cnblogs.com/fredlau/JSON.pdf
转载于:https://www.cnblogs.com/haiyabtx/archive/2013/06/08/3126758.html
基于jQuery的AJAX和JSON的实例相关推荐
- 基于jQuery的AJAX和JSON实现纯html数据模板
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板: <table ...
- java json html模板,基于jQuery的AJAX和JSON实现纯html数据模板(转载)
来自:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851799.html 通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的 ...
- ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论 发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
- ajax 随机,基于JQuery及AJAX实现名人名言随机生成器
基于JQuery及AJAX实现名人名言随机生成器 发布于 2017-05-05 06:56:38 | 137 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQu ...
- ajax前台转换json数据库,基于jQuery的ajax功能实现web service的json转化
不过这篇文章的题目我真不知道该怎么起,如果你因为这个差劲的题目错过这个东西,那真的很可惜. 我在做这个东西之前参考了不少文章: 第一步需要做的是如何在Server端把一个datatable转坏为自己需 ...
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...
- 基于jquery的ajax聊天室系统,基于jQuery的Ajax聊天室应用毕业设计(含外文翻译)...
基于jQuery的Ajax聊天室应用毕业设计(含外文翻译) 毕业设计(论文) I 基于基于 jQuery 的的 Ajax 聊天室应用聊天室应用 摘摘 要要 随着网络的逐渐普及,以及网络技术的不断发展, ...
- jQuery、ajax添加Json数据
需求说明: 简单的演示ajax提交json数据. 代码说明: ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立一个html或者jsp页面,引 ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- webapi输出炜json_.Net基于MVC4 Web Api输出Json格式实例
本文实例讲述了.Net基于MVC4 Web Api输出Json格式的方法,分享给大家供大家参考.具体实现方法如下: 1.Global 中增加json输出 GlobalConfiguration.Con ...
最新文章
- 多功能选择列表(左右选择)
- 8、SpringBoot-CRUD默认访问的首页以及thyleaf的静态文件引入/WebMvcConfigurer / WebMvcConfigurationSupport...
- Linux设备驱动之I/O端口与I/O内存
- firewallD卸载Linux,在Ubuntu 18.04/16.04系统上安装和使用Firewalld的方法
- 计算机网络学习笔记-1.1.3-速率相关的性能指标
- CentOS7.7安装MySQL5.6并配置环境变量(详细版)
- 模块 python_Python入门基础:模块基础
- linux两个卷组可以合并,Linux系统中所有的逻辑卷必须属于同一个卷组()。
- Java的transient关键字
- request.setAttribute()用法
- 使用复制存储过程执行解决“事务复制中的表大量更新导致无法及时同步”的问题 (转)...
- 计算机信息系统安全保卫工作,对计算机信息系统安全保护工作的检查
- 一、数据库应用系统分析及规划
- Selenium2 + Python3.6实战(五):生成HTML测试报告 Invalid argument
- html5字幕提取软件,VideoSubFinder(提取视频字幕软件)
- 计算机硬盘被制成动态硬盘,win10系统基本磁盘转换成动态磁盘的处理办法
- 2014-2015-2 《Java程序设计》课程学生博客列表
- java茌首字母_获取输入字符的首字母(中文为拼音首字母)
- 包含负数的二进制补码的加减运算
- 30本从禁书到名著的阅读书单
热门文章
- 转载:扒一扒Profiler中这几个“占坑鬼”
- MyEclipse 中各种 libraries 的含义
- iscsi实现多路径
- [C#] 计算大文件的MD5的两种方式(直接调用方法计算,流计算-适用于大文件)
- Luogu2606[ZJOI2010] 排列计数
- CF1A Theatre Square
- BZOJ2565 最长双回文串
- shell中算术运算、相加减
- html中怎么加入动态图片,视频加动态水印 怎么在视频画面中添加一个gif动态图片水印...
- rust 手动关闭子线程_Rust入坑指南:齐头并进(上)