jquery ajax json 综合应用实例

    
 
 
   
 
  订单ID /  客户ID   雇员ID /  订购日期 /  发货日期 /  货主名称 /  货主地址 /  货主城市 /  更多信息  
 
 
 
 LOADING.... 
  
 ////注：ID属性比较重要，用于数据绑定。

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

 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"]; 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