asp.net下 jquery jason 高效傳輸數(shù)據(jù)
<!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 src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/Gonneng.js" type="text/javascript"></script>
<script src="js/ajaxfn.js" type="text/javascript"></script>
</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">
訂購(gòu)日期
</span>/
<span id="ShippedDate">
發(fā)貨日期
</span>/
<span id="ShippedName">
貨主名稱(chēng)
</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>
Handler.ashx
<%@ 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$ 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = "http://tempuri.org/json/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler : IHttpHandler
{
string dbfile = ConfigurationManager.AppSettings["conn"].ToString();
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";
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()
{
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;
}
}
}
}
ajaxfn.js
//AJAX方法取得數(shù)據(jù)并顯示到頁(yè)面上
function bind()
{
$("[@id=ready]").remove();
$("#load").show();
$.ajax({
type: "get",//使用get方法訪問(wèn)后臺(tái)
dataType: "json",//返回json格式的數(shù)據(jù)
url: "Handler.ashx",//要訪問(wèn)的后臺(tái)地址
data: "pageIndex=" + pageIndex,//要發(fā)送的數(shù)據(jù)
complete :function(){$("#load").hide();},//AJAX請(qǐng)求完成時(shí)隱藏loading提示
success: function(msg){//msg為返回的數(shù)據(jù),在這里做數(shù)據(jù)綁定
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("<a href=OrderInfo.aspx?id=" + n.OrderID + "&pageindex="+pageIndex+"> More</a>");
row.attr("id","ready");//改變綁定好數(shù)據(jù)的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[@id=ready]").show();
SetPageInfo();
}
});
}
function ChangeDate(date)
{
return date.replace("-","/").replace("-","/");
}
//設(shè)置第幾頁(yè)/共幾頁(yè)的信息
function SetPageInfo()
{
$("#pageinfo").html(pageIndex + "/" + pageCount);
}
//AJAX方法取得分頁(yè)總數(shù)
function GetPageCount()
{
$.ajax({
type: "get",
dataType: "text",
url: "Handler.ashx",
data: "getPageCount=1",
async: false,
success: function(msg){
$("#pagecount").val(msg);
}
});
}
//改變翻頁(yè)按鈕狀態(tài)
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";
}
}
Gonneng.js
var pageIndex = 1
var pageCount = 0;
$(function(){
GetPageCount();//取得分頁(yè)總數(shù)
pageCount = parseInt($("#pagecount").val());//分頁(yè)總數(shù)放到變量pageCount里
$("#load").hide();//隱藏loading提示
$("#template").hide();//隱藏模板
ChangeState(0,1);//設(shè)置翻頁(yè)按鈕的初始狀態(tài)
bind();//綁定第一頁(yè)的數(shù)據(jù)
//第一頁(yè)按鈕click事件
$("#first").click(function(){
pageIndex = 1;
ChangeState(0,1);
bind();
});
//上一頁(yè)按鈕click事件
$("#previous").click(function(){
pageIndex -= 1;
ChangeState(-1,1);
if(pageIndex <= 1)
{
pageIndex = 1;
ChangeState(0,-1);
}
bind();
});
//下一頁(yè)按鈕click事件
$("#next").click(function(){
pageIndex += 1;
ChangeState(1,-1);
if(pageIndex>=pageCount)
{
pageIndex = pageCount;
ChangeState(-1,0);
}
bind(pageIndex);
});
//最后一頁(yè)按鈕click事件
$("#last").click(function(){
pageIndex = pageCount;
ChangeState(1,0);
bind(pageIndex);
});
});
還需要jquery-1.2.6.js 網(wǎng)上很多
web.config 中添加
<appSettings>
<add key="conn" value="Server=.;database=Northwind;uid=sa;pwd=sa"/>
<add key="PageSize" value="10"/>
</appSettings>
- 使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
- Jquery+asp.net后臺(tái)數(shù)據(jù)傳到前臺(tái)js進(jìn)行解析的方法
- asp.net網(wǎng)站開(kāi)發(fā)中用jquery實(shí)現(xiàn)滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù)(類(lèi)似于騰訊微博)
- Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫(kù)生成菜單導(dǎo)航條
- asp.net+jquery滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- Asp.net利用JQuery彈出層加載數(shù)據(jù)代碼
- jquery.Ajax()方法調(diào)用Asp.Net后臺(tái)的方法解析
- asp.net中利用Jquery+Ajax+Json實(shí)現(xiàn)無(wú)刷新分頁(yè)的實(shí)例代碼
- asp.net jquery+ajax異步刷新實(shí)現(xiàn)示例
- JQuery對(duì)ASP.NET MVC數(shù)據(jù)進(jìn)行更新刪除
相關(guān)文章
Asp.net配合easyui實(shí)現(xiàn)返回json數(shù)據(jù)實(shí)例
這篇文章主要介紹了Asp.net配合easyui實(shí)現(xiàn)返回json數(shù)據(jù)的方法,實(shí)例分析了Asp.net配合easyui返回json數(shù)據(jù)時(shí)出現(xiàn)的問(wèn)題及解決方法,非常具有實(shí)用價(jià)值的技巧,需要的朋友可以參考下2014-12-12ASP.NET Core依賴(lài)注入DI容器的方法實(shí)現(xiàn)
本文主要介紹了ASP.NET Core依賴(lài)注入DI容器的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03詳解如何創(chuàng)建一個(gè).NET Core工程
本文主要介紹了如何創(chuàng)建一個(gè).NET Core工程,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03asp.net repeater手寫(xiě)分頁(yè)實(shí)例代碼
想用repeater實(shí)現(xiàn)手寫(xiě)分頁(yè)的代碼,想自己控制各種樣式的朋友,可以用用。2009-05-05輕量級(jí)ORM框架Dapper應(yīng)用之實(shí)現(xiàn)DTO
本文詳細(xì)講解了使用Dapper實(shí)現(xiàn)DTO的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03Repeater對(duì)數(shù)據(jù)進(jìn)行格式化處理
最近不止一個(gè)同學(xué),問(wèn)我在Repeater里怎么格式化數(shù)據(jù),怎么處理。因?yàn)镽epeater 屬于服務(wù)器端控件。要么利用本身的控件事件來(lái)處理,要么在數(shù)據(jù)源上處理。2013-03-03.net GridView分頁(yè)模板的實(shí)例代碼
.net GridView分頁(yè)模板的實(shí)例代碼,對(duì)分頁(yè)代碼有興趣的朋友可以參考一下2013-03-03Asp.Net二級(jí)域名共享Forms身份驗(yàn)證、下載站/圖片站的授權(quán)訪問(wèn)控制
我們平時(shí)一般在做圖片或者文件下載權(quán)限控制的時(shí)候基本都是控制到下載頁(yè)面的,當(dāng)你的下載地址暴露后,瀏覽者就直接可以通過(guò)文件地址進(jìn)行下載了,這時(shí)候也就出現(xiàn)了我們常說(shuō)的盜鏈2012-02-02