1.设计htm页面
2.使用jQuery编写AJAX请求文件test2 ////注：ID属性比较重要，用于数据绑定。
<input id="first" type="button" value=" <<input id="previous" type="button"value=" " />> " /> 订单ID / 客户ID 雇员ID / 订购日期 / 发货日期 / 货主名称 / 货主地址 / 货主城市 / 更多信息LOADING....
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 =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(" More"); 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格式数据 以上就是jquery与json的结合实例讲解，希望对大家充分学习jquery与json的结合相关文章有所帮助。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
{
////// $codebehindclassname$ 的摘要说明
///[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