jquery ajax与asp.net

来源：互联网发布：时间序列相似性算法编辑：程序博客网时间：2024/05/29 04:18

通常我们用3种方法实现jquery 的ajax方法实现页面无刷新返回数据的异步交互功能

本人花费了很大的功夫才一一解析,网页上虽有很多案例,但是某些人可能做到了,但没有给

详细的说明

1. 使用aspx页面

//特别注意了,这里的aspx页面只是作为一个方法的载体,一定要删除了<html></html>中的全部内容(包括<html>本身也要删除)

//这时候 page.aspx页面只剩下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="page.aspx.cs" Inherits="Jquery.WebService" %>

我们要用的是page.aspx.cs里面的

protected void Page_Load(object sender, EventArgs e)

{

//当请求发送时,页面的Page_Load开始被执行

//首先用Request.From[“keyname”]方法实现提交的数据

// 其次对 Request.From[“keyname”]的数据进行处理

// 如string data =”I have been processed!”;

//最后用Response.Write(data);返回数据

}

//由此可见,我们为了请求一个方法而去单独创建了一个页面,是有点浪费了!

下面是一个案例

use_aspx.aspx里的内容

$().ready(function () {

$('#user-ajax').click(function () {

$.ajax({

asnc: true,

type: "POST",

dataType: 'text',

url: "page.aspx",//这里请求page.aspx页面

data: "id=kk&name=fff",

success: function (result) { alert(result); },

error: function (result, status) { alert(status + " sorry!"); }

});

})

});

page.aspx.cs里的 Page_Load(object sender, EventArgs e)方法

protected void Page_Load(object sender, EventArgs e)

{

string id = Request.Form["id"].ToString();

string name = Request.Form["name"].ToString();

Response.Write("id:"+id+"name:"+name);//都是string的类型

}

2. 使用ashx页面

//在ashx里我们可以选择方法

//下面是一个案例

//use_ashx.aspx页面内容

$().ready(function () {

$('#user-ajax').click(function () {

$.get("Handler1.ashx", { method: "method1", txt1: $("#Text1").text() }, function (msg) { $("#Text1").text(msg); } );

});

</script>

</head>

<body>

<div id="Text1" style="height:100px;border:1px solid Gray; color:Blue;">initial data</div>

</body>

</html>

//Handler1.ashx.cs中的内容

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace Jquery

{

/// <summary>

/// Summary description for Handler1

/// </summary>

public class Handler1 : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

String txt = context.Request["txt1"].ToString();

String method = context.Request["method"].ToString();

switch (method)

{

case "method1":

txt= Method1(txt);

break;

case "method2":

txt = Method1(txt);

break;

case "method3":

txt = Method1(txt);

break;

}

context.Response.Write(txt + "Hello World");

}

public string Method1(string para)

{

return para+" is dealed by method 1";

}

public string Method2(string para)

{

return para + " is dealed by method 3";

}

public string Method3(string para)

{

return para + " is dealed by method 3";

}

public bool IsReusable

{

get

{

return false;

}

3. 使用asmx页面

//在asmx里我们可以选择方法

//下面是一个案例

//use_asmx.aspx

$().ready(function () {

$('#user-ajax').click(function () {

$.ajax({

asnc: true,

type: "POST",

dataType: 'xml',//这里是为了使用jquery的便利,获得丰富的数据,才使用xml

url: "WebService1.asmx/HelloWorld",//选择了HelloWorld方法

data: "id=kk&name=fff",//最好使用这种传统形式

// contentType: 'application/html; charset=utf-8',//这一行不要写

success: function (result) { alert($(result).find("string").first().text()); },

error: function (result, status) { alert(status + " sorry!"); }

});

})

});

</script>

</head>

//WebService1.asmx.cs里面的代码

//WebService1.asmx.cs利于2个方法,我们选择性的请求了方法HelloWorld()

[WebMethod]

public List<string> HelloWorld(string id,string name )

{

List<string> strList =new List<string>();

strList.Add("aaaaaaaa");

strList.Add("bbbbbbbbb");

strList.Add("cccccccccccc");

strList.Add("vvvvvvvvvvvv");

return strList;

}

[WebMethod (EnableSession=true)]

public static string GetWish(string value1 , string value2, string value3)

{

return String.Format("祝Á¡ê您¨²在¨²{3}年¨º里¤? {0}、¡é{1}、¡é{2}", value1, value2, value3);

}

//三种异步请求方式建议使用asmx,也可以自己权衡