jquery ajax json 综合应用实例_H5之家 - 中国HTML5教程资源分享第一站

jquery ajax json 综合应用实例

标签: 时间:2016-01-08

这篇文章主要介绍了jquery ajax json 综合应用实例，分为三个阶段,设计htm页面,使用jQuery编写AJAX请求文件，利用JSON三方控件在服务器端获取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 type="button" value=" << " /><input type="button" value=" < " /><input type="button" value=" > " /><input type="button" value=" >> " /> <span></span> <ul> <li> <span> 订单ID </span>/ <span> 客户ID </span> <span> 雇员ID </span>/ <span> 订购日期 </span>/ <span> 发货日期 </span>/ <span> 货主名称 </span>/ <span> 货主地址 </span>/ <span> 货主城市 </span>/ <span> 更多信息 </span> </li> </ul> </div> <div> LOADING.... </div> <input type="hidden" /> </div> </body> </html> ////注：ID属性比较重要，用于数据绑定。

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

3.利用JSON三方控件在服务器端获取JSON格式数据

<%@ WebHandler Language="C#" %> 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"]; 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 ajax json 综合应用实例。

原文地址：