基于jQuery的AJAX请求Table显示
2014-03-26 11:33
417 查看
一:通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<tr>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
订单ID</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
客户ID</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
雇员ID</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
订购日期</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
发货日期</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
货主名称</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
货主地址</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
货主城市</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
更多信息</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</tr>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<tr id="template">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="OrderID">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="CustomerID">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="EmployeeID">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="OrderDate">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedDate">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedName">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedAddress">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedCity">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="more">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</tr>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</table>
二:再来看一下AJAX请求和绑定数据的代码
$.ajax({
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
type: "get",//使用get方法访问后台
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dataType: "json",//返回json格式的数据
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
url: "BackHandler.ashx",//要访问的后台地址
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
data: "pageIndex=" + pageIndex,//要发送的数据
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
success: function(msg){//msg为返回的数据,在这里做数据绑定
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var data = msg.table;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
$.each(data, function(i, n){
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var row = $("#template").clone();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#OrderID").text(n.订单ID);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#CustomerID").text(n.客户ID);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#EmployeeID").text(n.雇员ID);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#OrderDate").text(ChangeDate(n.订购日期));
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#ShippedName").text(n.货主名称);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#ShippedAddress").text(n.货主地址);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#ShippedCity").text(n.货主城市);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.attr("id","ready");//改变绑定好数据的行的id
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.appendTo("#datas");//添加到模板的容器中
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
});
三:这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份,接下来row.find("#OrderID").text(n.订单ID);,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。
<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<tr>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
订单ID</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
客户ID</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
雇员ID</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
订购日期</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
发货日期</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
货主名称</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
货主地址</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
货主城市</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
更多信息</th>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</tr>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<tr id="template">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="OrderID">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="CustomerID">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="EmployeeID">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="OrderDate">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedDate">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedName">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedAddress">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="ShippedCity">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<td id="more">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</td>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</tr>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</table>
二:再来看一下AJAX请求和绑定数据的代码
$.ajax({
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
type: "get",//使用get方法访问后台
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dataType: "json",//返回json格式的数据
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
url: "BackHandler.ashx",//要访问的后台地址
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
data: "pageIndex=" + pageIndex,//要发送的数据
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
success: function(msg){//msg为返回的数据,在这里做数据绑定
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var data = msg.table;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
$.each(data, function(i, n){
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var row = $("#template").clone();
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#OrderID").text(n.订单ID);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#CustomerID").text(n.客户ID);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#EmployeeID").text(n.雇员ID);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#OrderDate").text(ChangeDate(n.订购日期));
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
if(n.发货日期!== undefined) row.find("#ShippedDate").text(ChangeDate(n.发货日期));
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#ShippedName").text(n.货主名称);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#ShippedAddress").text(n.货主地址);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#ShippedCity").text(n.货主城市);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.订单ID + "&pageindex="+pageIndex+"> More</a>");
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.attr("id","ready");//改变绑定好数据的行的id
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
row.appendTo("#datas");//添加到模板的容器中
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
});
三:这个是jQuery的AJAX方法,返回数据并不复杂,主要说明一下怎么把数据按模板的定义显示到到页面上。首先是这个“var row = $("#template").clone();”先把模板复制一份,接下来row.find("#OrderID").text(n.订单ID);,表示找到id=OrderID的标记,设置它的innerText为相应的数据,当然也可以设置为html格式的数据。或者是通过外部的函数把数据转换成需要的格式,比如这里row.find("#OrderDate").text(ChangeDate(n.订购日期));有点服务器控件做模板绑定数据的感觉。
相关文章推荐
- jquery-ajax请求后台数据转换json显示在select下拉列表
- jquery-ajax请求action读取oracle数据库clob字段xml数据格式化显示(struts2)
- jquery 通过ajax请求获取后台数据显示在表格上的方法
- 基于Jquery+Ajax+Json实现分页显示附效果图
- jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料
- 基于Jquery+Ajax+Json实现分页显示
- PHP CURL模拟JQuery的Ajax请求头(添加可显示在_SERVER中的参数)
- 【原创】一个非常简洁基于jquery原创无限级联ajax异步请求下拉框插件
- 基于Jquery+Ajax+Json实现分页显示
- Jquery+ajax请求data显示在GridView上(asp.net)
- jquery的ajax请求页面,pc显示正常webApp请求不到,并且报错302的原因
- 基于jQuery替换table中的内容并显示进度条的代码
- 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
- 基于jquery的$.ajax再次封装(可以防止重复请求)
- [置顶] ajax请求得到后台数据,前台页面,使用table模板然后clone,显示表格,,不用append拼接 “字符串和HTML表格标签”
- 基于jQuery替换table中的内容并显示进度条的代码
- 基于Jquery 的 Disucz Ajaz 请求 比自带的Ajax 简单
- jquery 使用ajax请求数据显示到页面表格中
- 【asp.net小札记】jquery+ajax绑定数据库显示table
- jQuery,ajax请求返回长数字字符串,jsp页面不显示为科学计数法