jQuery、JSON组合
xuewenke 2012-05-20
通过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=">>"/>
<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+"> 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;
}
}
}
}
