通过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 ns=\"http://www.w3.org/1999/xhtml\">
<head>
< >test2</ >
< language=\" \" type=\"text/ \" src=\"js/jquery-latest.pack.js\"></ >
< language=\" \" type=\"text/ \" src=\"js/PageDate.js\"></ >
</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请求文件
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. ;
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\"];
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();
Json content = new Json ();
JsonArray Orders = new JsonArray();
Json Order;
Json OrderItem = new Json ();
for (int i = 0; i < dt.Rows.Count; i++)
{
Order = new Json ();
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 ajax json 综合应用实例。
继续阅读与本文标签相同的文章
上一篇 :
js确认框confirm()三种使用方法
下一篇 :
在联盟链技术与应用中如何结合数据库
-
城市数字化后，新一代内生安全系统可全方位保护
2026-05-14栏目： 教程
-
谷歌也来“唱衰”5G，5G手机只会徒增功耗？为何这么说？
2026-05-14栏目： 教程
-
量子信息和量子技术白皮书合肥宣言在中科大发布
2026-05-14栏目： 教程
-
微信悄悄更新一新功能，来看看！
2026-05-14栏目： 教程
-
打破三大运营商垄断，第四大运营商终于来了！
2026-05-14栏目： 教程