asp.net下 jquery jason 高效传输数据_实用技巧

Default.html
<!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">
订购日期
</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>
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$ 的摘要说明
/// </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方法取得数据并显示到页面上
function bind()
{
$("[@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为返回的数据，在这里做数据绑定
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");//改变绑定好数据的行的id
row.appendTo("#datas");//添加到模板的容器中
});
$("[@id=ready]").show();
SetPageInfo();
}
});
}
function ChangeDate(date)
{
return date.replace("-","/").replace("-","/");
}
//设置第几页/共几页的信息
function SetPageInfo()
{
$("#pageinfo").html(pageIndex + "/" + pageCount);
}
//AJAX方法取得分页总数
function GetPageCount()
{
$.ajax({
type: "get",
dataType: "text",
url: "Handler.ashx",
data: "getPageCount=1",
async: false,
success: function(msg){
$("#pagecount").val(msg);
}
});
}
//改变翻页按钮状态
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();//取得分页总数
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);
});
});
还需要jquery-1.2.6.js 网上很多
web.config 中添加
<appSettings>
<add key="conn" value="Server=.;database=Northwind;uid=sa;pwd=sa"/>
<add key="PageSize" value="10"/>
</appSettings>

时间： 2024-10-22 08:12:45

asp.net下 jquery jason 高效传输数据_实用技巧的相关文章

ASP.NET中JQuery+AJAX调用后台_实用技巧

做订餐系统手机端时,遇到一个问题,实现登录功能时,我要调用后台的方法进行验证和判断.我们应用的是webForm进行开发的,正常情况下只要绑定按钮的方法,前后台对应就可以实现.但是,手机端应用MUI样式之后,就不适用于这种情况了.基于这个问题,我们使用JQuery+Ajax技术,其实MUI中也自带ajax技术.  实现过程: webForm代码:       function login() { var name = document.getElementById("username")

asp.net下加密Config的方法_实用技巧

复制代码 代码如下: <appSettings> <!-- 连接字符串是否加密 --> <add key="ConStringEncrypt" value="false"/> <!-- 连接字符串,(可以扩展支持不同数据库)如果是加密方式,上面一项要设置为true,如果是明文server=127.0.0.1;database=codematic;uid=sa;pwd=,上面设置为false --> <add ke

asp.net下Response.ContentType类型汇总_实用技巧

在ASP.NET中使用Response.ContentType="类型名";来确定输出格式 'ez' => 'application/andrew-inset',  'hqx' => 'application/mac-binhex40',  'cpt' => 'application/mac-compactpro',  'doc' => 'application/msword',  'bin' => 'application/octet-stream', 

asp.net下cookies操作完美代码_实用技巧

复制代码 代码如下: using System; using System.Web; namespace Moosoft.OA.Public { /// <summary> /// Cookie帮助类 /// </summary> public class CookiesHelper { #region 获取Cookie /// <summary> /// 获得Cookie的值 /// </summary> /// <param name="

asp.net下ajax.ajaxMethod使用方法_实用技巧

使用AjaxMethod要满足一下几点: 1.如果还没有ajax.dll文件,就先下载一个来 2.将ajax.dll添加到项目引用中:在VS的解决方案资源管理器中右键点击项目名称--"添加项目引用"--浏览,找到ajax.dll确定 3.webCofig中<httpHandlers>加上<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFacto

asp.net下的异步加载_实用技巧

具体我本身大概用的就有两种,需配合JQ. 第一种,直接通过AJAX去请求页面:例如, 1:dataType必须是html或者Text格式, 2:Type:必须是'Post'请求 3:后台Load事件必须判断是否为Post请求 后台代码如下: 测试结果如下: 第二种:类似于.net MVC直接请求方法. 1:后台代码中,引入using System.Web.Services; 2:方法必须是静态修饰,且方法上面打上特性 [WebMethod] 3:在JQ中返回成功回调函数内获取数据必须是 返回名字

ASP.NET多彩下拉框开发实例_实用技巧

本文主要是演示如何读取系统颜色并在下拉框中的每个条目中显示对应的颜色,该源码主要展示以下内容:    1.如何获得System.Drawing.KnownColor颜色控件的列表枚举    2.如何排除系统环境颜色,如"Active Border"    3.如何分配颜色到下拉框的每个条目   代码详解:    命名下拉框为ddlMultiColor 来显示颜色名称及颜色,用<div>标签显示右侧矩形结果,Aspx代码如下 <table> <tr>

分享下Asp.Net面试题目及答案集合_实用技巧

1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成员,该类内部和继承类中可以访问. public : 公共成员,完全公开,没有访问限制. internal: 在同一命名空间内可以访问. 2 .列举asp.net 页面之间传递值的几种方式. 答. 1.使用querystring, 如....?id=1; response. redirect()...

win10下ASP.NET Core部署环境搭建步骤_实用技巧

随着ASP.NET Core 1.0 rtm的发布,网上有许多相关.net core 相关文章,今刚好有时间也在win10环境上搭建下 ASP.NET Core的部署环境,把过程记录下给大家. 1. 开发运行环境 1> Visual Studio 2015 Update 3* 2> .NET Core 1.0 for Visual Studio (包括asp.net core 模板,其中如果机器上没有.net core sdk会默认安装)地址https://go.microsoft.com/f