通过AJAX异步减少网络内容传输，而JSON则可以把传输内容缩减到纯数据；然后利用jQuery内置的AJAX功能直接获得JSON格式的数据；在客户端直接绑定到数据控件里面，从而达到最优。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
//////1.设计htm页面：
 
<!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>test2</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=" >> " />
&nbsp;<span id="pageinfo"></span>
<ul id="datas">
<li id="template">
<span id="OrderID">
订单ID 
</span>/ 
<span id="CustomerID">
客户ID 
</span>
<span id="EmployeeID">
雇员ID 
</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>
</div>
<div id="load" style="left: 0px; position: absolute; top: 0px; margin: 0px !important; padding: 0px !important; outline: 0px !important; border: 0px !important; vertical-align: baseline !important; font-size: 1em !important; border-radius: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; background: none !important;">>
LOADING.... 
</div>
<input type="hidden" id="pagecount" />
</div>
</body>
</html>
////注：ID属性比较重要，用于数据绑定。
 
/////2.使用jQuery编写AJAX请求文件
 
var pageIndex = 1
var pageCount = 0; 
  
$(function(){ 
GetPageCount();//取得分页总数 
pageCount = parseInt($("#pagecount").val());//分页总数放到变量pageCount里 
$("#load").hide();//隐藏loading提示 
$("#template").hide();//隐藏模板 
ChangeState(0,1);//设置翻页按钮的初始状态 
  
bind();//绑定第一页的数据 
  
//第一页按钮click事件 
$("#first").click(function(){ 
pageIndex = 1; 
ChangeState(0,1); 
bind();  
}); 
  
//上一页按钮click事件 
$("#previous").click(function(){ 
pageIndex -= 1; 
ChangeState(-1,1);  
if(pageIndex <= 1) 
{ 
pageIndex = 1; 
ChangeState(0,-1); 
} 
bind();  
}); 
  
//下一页按钮click事件 
$("#next").click(function(){ 
pageIndex += 1; 
ChangeState(1,-1); 
if(pageIndex>=pageCount) 
{ 
pageIndex = pageCount; 
ChangeState(-1,0); 
} 
bind(pageIndex);  
}); 
  
//最后一页按钮click事件 
$("#last").click(function(){ 
pageIndex = pageCount; 
ChangeState(1,0); 
bind(pageIndex);  
});  
}); 
  
//AJAX方法取得数据并显示到页面上 
function bind() 
{ 
$("[@id=ready]").remove(); 
$("#load").show(); 
$.ajax({ 
type: "get",//使用get方法访问后台 
dataType: "json",//返回json格式的数据 
url: "Handler.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.OrderID); 
row.find("#CustomerID").text(n.CustomerID); 
row.find("#EmployeeID").text(n.EmployeeID); 
row.find("#OrderDate").text(ChangeDate(n.OrderDate)); 
if(n.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate)); 
row.find("#ShippedName").text(n.ShipName); 
row.find("#ShippedAddress").text(n.ShipAddress); 
row.find("#ShippedCity").text(n.ShipCity); 
row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+">&nbsp;More</a>");  
row.attr("id","ready");//改变绑定好数据的行的id 
row.appendTo("#datas");//添加到模板的容器中 
}); 
$("[@id=ready]").show(); 
SetPageInfo(); 
} 
}); 
} 
  
function ChangeDate(date) 
{ 
return date.replace("-","/").replace("-","/"); 
} 
  
//设置第几页/共几页的信息 
function SetPageInfo() 
{ 
$("#pageinfo").html(pageIndex + "/" + pageCount); 
} 
  
//AJAX方法取得分页总数 
function GetPageCount() 
{ 
$.ajax({ 
type: "get", 
dataType: "text", 
url: "Handler.ashx", 
data: "getPageCount=1", 
async: false, 
success: function(msg){ 
$("#pagecount").val(msg); 
} 
}); 
} 
  
//改变翻页按钮状态  
function ChangeState(state1,state2) 
{ 
if(state1 == 1) 
{  
document.getElementById("first").disabled = ""; 
document.getElementById("previous").disabled = ""; 
} 
else if(state1 == 0) 
{  
document.getElementById("first").disabled = "disabled"; 
document.getElementById("previous").disabled = "disabled"; 
} 
if(state2 == 1) 
{ 
document.getElementById("next").disabled = ""; 
document.getElementById("last").disabled = ""; 
} 
else if(state2 == 0) 
{ 
document.getElementById("next").disabled = "disabled"; 
document.getElementById("last").disabled = "disabled"; 
} 
}
 
 
/////3.利用JSON三方控件在服务器端获取JSON格式数据
 
<%@ WebHandler Language="C#" Class="jQueryJSON.Handler" %>
  
using System; 
using System.Data; 
using System.Web; 
using System.Collections; 
using System.Web.Services; 
using System.Web.Services.Protocols; 
using System.Configuration; 
using System.Data.SqlClient; 
using System.Text; 
using System.Xml; 
using NetServ.Net.Json; 
  
namespace jQueryJSON 
{ 
/// <summary>
/// $codebehindclassname$ 的摘要说明 
/// </summary>
[WebService(Namespace = "http://tempuri.org/json/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
public class Handler : IHttpHandler 
{ 
readonly int PageSize = int.Parse(ConfigurationManager.AppSettings["PageSize"]); 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
//不让浏览器缓存 
context.Response.Buffer = true; 
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1); 
context.Response.AddHeader("pragma", "no-cache"); 
context.Response.AddHeader("cache-control", ""); 
context.Response.CacheControl = "no-cache"; 
  
string result = ""; 
if (context.Request.Params["getPageCount"] != null) result = GetPageCount(); 
if (context.Request.Params["pageIndex"] != null) 
{ 
string pageindex = context.Request.Params["pageIndex"]; 
//if (context.Cache.Get(pageindex) != null) 
// result = context.Cache.Get(pageindex).ToString(); 
//else 
//{ 
// result = GetPageData(context.Request.Params["pageIndex"]); 
// context.Cache.Add( 
// pageindex, 
// result, 
// null, 
// DateTime.Now.AddMinutes(1), 
// System.Web.Caching.Cache.NoSlidingExpiration, 
// System.Web.Caching.CacheItemPriority.Default, 
// null); 
//} 
result = GetPageData(context.Request.Params["pageIndex"]); 
} 
context.Response.Write(result); 
} 
  
private string GetPageData(string p) 
{ 
int PageIndex = int.Parse(p); 
string sql; 
if (PageIndex == 1) 
sql = "select top " + PageSize.ToString() + " * from Orders order by OrderID desc"; 
else 
sql = "select top " + PageSize.ToString() + " * from Orders where OrderID not in(select top " + ((PageIndex - 1) * PageSize).ToString() + " OrderID from Orders order by OrderID desc) order by OrderID desc"; 
string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString(); 
SqlConnection conn = new SqlConnection(dbfile); 
SqlDataAdapter da = new SqlDataAdapter(sql, conn); 
DataTable dt = new DataTable("table"); 
da.Fill(dt); 
return DataTableJson(dt); 
  
} 
  
private string GetPageCount() 
{ 
string dbfile = ConfigurationManager.ConnectionStrings["conn"].ToString(); 
SqlConnection conn = new SqlConnection(dbfile); 
SqlCommand cmd = new SqlCommand("select count(*) from Orders", conn); 
conn.Open(); 
int rowcount = Convert.ToInt32(cmd.ExecuteScalar()); 
conn.Close(); 
return ((rowcount + PageSize - 1) / PageSize).ToString(); 
} 
  
private string DataTable2Json(DataTable dt) 
{ 
StringBuilder jsonBuilder = new StringBuilder(); 
jsonBuilder.Append("{\""); 
jsonBuilder.Append(dt.TableName); 
jsonBuilder.Append("\":["); 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
jsonBuilder.Append("{"); 
for (int j = 0; j < dt.Columns.Count; j++) 
{ 
jsonBuilder.Append("\""); 
jsonBuilder.Append(dt.Columns[j].ColumnName); 
jsonBuilder.Append("\":\""); 
jsonBuilder.Append(dt.Rows[i][j].ToString()); 
jsonBuilder.Append("\","); 
} 
jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
jsonBuilder.Append("},"); 
} 
jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
jsonBuilder.Append("]"); 
jsonBuilder.Append("}"); 
return jsonBuilder.ToString(); 
} 
  
private string DataTableJson(DataTable dt) 
{ 
JsonWriter writer = new JsonWriter(); 
JsonObject content = new JsonObject(); 
JsonArray Orders = new JsonArray(); 
JsonObject Order; 
JsonObject OrderItem = new JsonObject(); 
  
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
Order = new JsonObject(); 
for(int j =0;j<dt.Columns.Count;j++) 
{  
Order.Add(dt.Columns[j].ColumnName, dt.Rows[i][j].ToString()); 
} 
Orders.Add(Order);  
}  
content.Add(dt.TableName, Orders); 
content.Write(writer); 
  
writer = new IndentedJsonWriter(); 
content.Write(writer); 
  
return writer.ToString(); 
} 
  
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
}

jquery与json的结合的更多相关文章

  1. jQuery对json快速赋值

    jQuery对json快速赋值,重点在于将input的id取跟JSON同样的名称. <!DOCTYPE html> <html> <head lang="en& ...

  2. 用jquery解析JSON数据的方法以及字符串转换成json的3种方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...

  3. [转]jquery 对 Json 的各种遍历

    原文地址:http://caibaojian.com/jquery-each-json.html 概述 JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采 ...

  4. jQuery.parseJSON(json) 使用方法

    jQuery.parseJSON(json) 接受一个JSON字符串,返回解析后的对象. 返回值:String传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串:{test ...

  5. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  6. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

  7. jQuery解析JSON的问题

    在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换.JSON数据的解析是关键. JS ...

  8. （转）JQuery处理json与ajax返回JSON实例

    son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...

  9. jQuery读取json文件，实现省市区/县（国标）三级联动

    最近做一个微信项目,需要用户填写所在的省市区/县,决定使用jQuery读取json文件来实现省市区/县的联动. 其实很简单,jQuery文档也有详细解释: 代码如下: html <table w ...

  10. [转] jQuery 操作 JSON 数据

    jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...

随机推荐

  1. PHP中关于时间（戳）、时区、本地时间、UTC时间等的梳理

    PHP中关于时间(戳).时区.本地时间.UTC时间等的梳理 在PHP开发中,我们经常会在时间问题上被搞糊涂,比如我们希望显示一个北京时间,但是当我们使用date函数进行输出时,却发现少了8个小时.几乎 ...

  2. emberjs 按年月分组

    一个集合,里面有年和月的属性,按照年和月进行分组显示数据 + item.TopicMonth }).map(function (value, key) { return { time: { year: ...

  3. 撰写html标签的快捷方式2

    1.写一个含有类的标签. div.demo-inline + tap键 就会生成如下<div class="demo-inline"></div> 2.CS ...

  4. 去除底部“自豪地采用 WordPress”版权信息----最后附最新版的删除方法！！

    footer.php get_template_part( 'template-parts/footer/site', 'info' );

  5. python学习之老男孩python全栈第九期_数据库day003知识点总结 —— MySQL数据库day3

    复习: 1. 增 insert into xx(name) values('root'),('xxx'); insert into xx(name) select id from tb1; 2. 自增 ...

  6. Ubuntu搜索不到WiFi的解决办法

    时间:2018年1月25日 废话连篇:杭州下了第一场雪,冒险严寒来到实验室,打开电脑,纳尼连不上wifi了,好吧!不要被这件小事影响心情,开始修复了,经过一顿搜索,可能是因为驱动的问题,终端输入以下两 ...

  7. opencv3.2.0图像处理之方框滤波boxFilter API函数

    /*.1.方框滤波:boxFilter函数(注:均值滤波是归一化后的方框滤波)*/ /*函数原型: void boxFilter(InputArray src, OutputArray dst, in ...

  8. Xcode 7安装KSImageNamed 不启作用

    1. 到 ~/Library/Developer/Xcode/Plug-ins  删除KSImageNamed.xcplugin 2. 在~/Library/Developer/Xcode/Plug- ...

  9. 润乾V4导出TXT时自定义分隔符

     ◆ 背景说明 报表中,导出text时,默认没有分隔符:应用中对导出Text,希望能自定义分隔符.在tag中定义了 textDataSeparator属性,让用户在导出Text时自定义分隔符,从而 ...

  10. vue.js高仿饿了么（前期整理）

    1.熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包. 2.熟悉代码规范 从架构设计.组件抽象.模块 ...