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>

</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请求文件

//改变翻页按钮状态
    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;
            }
        }
    }
}

运行效果如下：

服务器端返回JSON数据格式:

相关阅读:
js Object.freeze()
js Object.seal()
js数字千分位，三种写法，，拿走。。。
nodejs mongoose连接mongodb报错，command find requires authentication
nodejs express 服务代理
容器监控之cadvisor
kubernetes 集群卸载清理
解决目录太大-建立软链接
与运算（&）、或运算（|）、异或运算（^）
jpa中将查询的字段返回为Map键值对类型

原文地址：https://www.cnblogs.com/luluping/p/1435469.html