通常我们用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页面内容
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$('#user-ajax').click(function () {
$.get("Handler1.ashx", { method: "method1", txt1: $("#Text1").text() }, function (msg) { $("#Text1").text(msg); } );
});
});
</script>
</head>
<body>
<input id="user-ajax" type="button" value="click" />
<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
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().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,也可以自己权衡
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
