实例讲解jquery与json的结合

240 阅读 0 评论 159 点赞

我是靠谱客的博主怕黑往事，这篇文章主要介绍实例讲解jquery与json的结合，现在分享给大家，希望可以做个参考。

通过AJAX异步减少网络内容传输，而JSON则可以把传输内容缩减到纯数据；然后利用jQuery内置的AJAX功能直接获得JSON格式的数据；在客户端直接绑定到数据控件里面，从而达到最优。
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=" >> " /> 
 <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; background-color: red"> 
LOADING.... 
</div> 
<input type="hidden" id="pagecount" /> 
</div> 
</body> 
</html> 
////注：ID属性比较重要，用于数据绑定。

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
<!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=" >> " /> 
 <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; background-color: red"> 
LOADING.... 
</div> 
<input type="hidden" id="pagecount" /> 
</div> 
</body> 
</html> 
////注：ID属性比较重要，用于数据绑定。

2.使用jQuery编写AJAX请求文件

复制代码

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
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+"> 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; 
} 
} 
} 
}

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
<%@ 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; 
} 
} 
} 
}