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

<htmlxmlns="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/>

<inputid="first"type="button"value="<<"/><inputid="previous"type="button"

value="<"/><inputid="next"type="button"value=">"/><inputid="last"type="button"

value=">>"/>

&nbsp;<spanid="pageinfo"></span>

<ulid="datas">

<liid="template">

<spanid="OrderID">

订单ID

</span>/

<spanid="CustomerID">

客户ID

</span>

<spanid="EmployeeID">

雇员ID

</span>/

<spanid="OrderDate">

订购日期

</span>/

<spanid="ShippedDate">

发货日期

</span>/

<spanid="ShippedName">

货主名称

</span>/

<spanid="ShippedAddress">

货主地址

</span>/

<spanid="ShippedCity">

货主城市

</span>/

<spanid="more">

更多信息

</span>

</li>

</ul>

</div>

<divid="load"style="left:0px;position:absolute;top:0px;background-color:red">

LOADING....

</div>

<inputtype="hidden"id="pagecount"/>

</div>

</body>

</html>

注:ID属性比较重要,用于数据绑定。2.使用jQuery编写AJAX请求文件

var pageIndex = 1var 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方法取得数据并显示到页面上

functionbind()

{

$("[@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为返回的数据,在这里做数据绑定

vardata=msg.table;

$.each(data,function(i,n){

varrow=$("#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("<ahref=OrderInfo.aspx?id="+n.OrderID+"&pageindex="+pageIndex+">&nbsp;More</a>");

row.attr("id","ready");//改变绑定好数据的行的id

row.appendTo("#datas");//添加到模板的容器中

});

$("[@id=ready]").show();

SetPageInfo();

}

});

}

functionChangeDate(date)

{

returndate.replace("-","/").replace("-","/");

}

//设置第几页/共几页的信息

functionSetPageInfo()

{

$("#pageinfo").html(pageIndex+"/"+pageCount);

}

//AJAX方法取得分页总数

functionGetPageCount()

{

$.ajax({

type:"get",

dataType:"text",

url:"Handler.ashx",

data:"getPageCount=1",

async:false,

success:function(msg){

$("#pagecount").val(msg);

}

});

    }

//改变翻页按钮状态   

functionChangeState(state1,state2)

{

if(state1==1)

{

document.getElementById("first").disabled="";

document.getElementById("previous").disabled="";

}

elseif(state1==0)

{

document.getElementById("first").disabled="disabled";

document.getElementById("previous").disabled="disabled";

}

if(state2==1)

{

document.getElementById("next").disabled="";

document.getElementById("last").disabled="";

}

elseif(state2==0)

{

document.getElementById("next").disabled="disabled";

document.getElementById("last").disabled="disabled";

}

    }

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

<%@ WebHandler Language="C#" class="jQueryJSON.Handler" %>

using System;

usingSystem.Data;

usingSystem.Web;

usingSystem.Collections;

usingSystem.Web.Services;

usingSystem.Web.Services.Protocols;

usingSystem.Configuration;

usingSystem.Data.SqlClient;

usingSystem.Text;

usingSystem.Xml;

using NetServ.Net.Json;

namespace jQueryJSON

{

///<summary>

///$codebehindclassname$的摘要说明

///</summary>

[WebService(Namespace="http://tempuri.org/json/")]

[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]

publicclassHandler:IHttpHandler

{

readonlyintPageSize=int.Parse(ConfigurationManager.AppSettings["PageSize"]);

publicvoidProcessRequest(HttpContextcontext)

{

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)

{

stringpageindex=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)

{

intPageIndex=int.Parse(p);

stringsql;

if(PageIndex==1)

sql="selecttop"+PageSize.ToString()+"*fromOrdersorderbyOrderIDdesc";

else

sql="selecttop"+PageSize.ToString()+"*fromOrderswhereOrderIDnotin(selecttop"+((PageIndex-1)*PageSize).ToString()+"OrderIDfromOrdersorderbyOrderIDdesc)orderbyOrderIDdesc";

stringdbfile=ConfigurationManager.ConnectionStrings["conn"].ToString();

SqlConnectionconn=newSqlConnection(dbfile);

SqlDataAdapterda=newSqlDataAdapter(sql,conn);

DataTabledt=newDataTable("table");

da.Fill(dt);

            return DataTableJson(dt);

        }

        private string GetPageCount()

{

stringdbfile=ConfigurationManager.ConnectionStrings["conn"].ToString();

SqlConnectionconn=newSqlConnection(dbfile);

SqlCommandcmd=newSqlCommand("selectcount(*)fromOrders",conn);

conn.Open();

introwcount=Convert.ToInt32(cmd.ExecuteScalar());

conn.Close();

return((rowcount+PageSize-1)/PageSize).ToString();

        }

        private string DataTable2Json(DataTable dt)

{

StringBuilderjsonBuilder=newStringBuilder();

jsonBuilder.Append("{\"");

jsonBuilder.Append(dt.TableName);

jsonBuilder.Append("\":[");

for(inti=0;i<dt.Rows.Count;i++)

{

jsonBuilder.Append("{");

for(intj=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("}");

returnjsonBuilder.ToString();

        }

        private string DataTableJson(DataTable dt)

{

JsonWriterwriter=newJsonWriter();

JsonObjectcontent=newJsonObject();

JsonArrayOrders=newJsonArray();

JsonObjectOrder;

JsonObjectOrderItem=newJsonObject();

for(inti=0;i<dt.Rows.Count;i++)

{

Order=newJsonObject();

for(intj=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);

returnwriter.ToString();

        }

        public bool IsReusable

{

get

{

returnfalse;

}

}

}

}

相关推荐