甩掉 ashx/asmx，使用jQuery.ajaxWebService请求WebMethod,Ajax处理更加简练

转自：http://www.cnblogs.com/cqiliang/archive/2010/05/05/1728160.html 

 

在WebForm下 开发ajax程序，需要借助于一般处理程序(*.ashx)或web服务(*.asmx)，并且每一个ajax请求，都要建一个这样的文件，如此一来，如 果在一个项目中ajax程序多了，势必会产生一堆的.ashx或.asmx，虽然于程序本身无碍，但那一堆文件看上去总觉得有伤大雅。那么可不可以丢掉这 些.ashx和.asmx，选择一种更简练的方式来做ajax程序呢。
答案是肯定的，那就是：WebMethod 。

 

首先在 aspx.cs文件里建一个公开的静态方法，然后加上WebMethod属性。如：

[WebMethod]
  public  static  string  GetUserName(string  strId) 
 {
        return strId ;
 }

 

如果要在这个方法里操作session，那 还得将WebMethod的EnableSession 属性设为true 。即：

 [WebMethod(EnableSession = true)]     //或[WebMethod(true)]   

 

然后我们就写ajax程序来访问这个程序，我们就用jQuery吧。

    $.ajax({
          type :   " POST ",
           contentType :   " application/json ",
           url :   " WebForm2.aspx/GetUserName ",
           data :   " {} ",
           dataType :   " json ",
           success :   function ( json ){
                        alert( json .d );      //json返回数据格式   {"d", "返回的文字"}
          }

    });

 

 

　　这里对几个参数做一下简单的说 明，
　　type：请求的类型，这里必须用post 。WebMethod方法只接受post类型的请求。
　　contentType： 发送信息至服务器时内容编码类型。我们这里一定要用application/json 。
　　url：请求的服务器端处理程序的路径，格式为"文 件名(含后缀)/方法名"
　　data：参数列表。注意，这里的参数一定要是json格式的字符串，记住是字符串格式，如：" {aa:11,bb:22,cc:33 , ...}"。如果你写的不是字符串，那jquery会把它实序列化成字符串，那么在服务器端接受到的就不是json格式了，且不能为空，即使没有参数也要 写成"{}"，如上例。很多人不成功，原因就在这里。
　　dataType：服务器返回的数据类型。必须是json，其他的都无效。因为 webservice 是一json格式返回数据的，其形式为:   {  "d"   :   " ....  " }  
　　success：请求成功后的回调函数。你可以在这里对返回的数据做任意处理。

　　我们可以看到其中一些参数值是固定的，所以从复用性的角度考虑，我们可以给jquery做一个扩 展，对上面的函数做一下简单的封装：
我们建一个脚本文件叫 jquery.extend.js。在里面写一个叫ajaxWebService的方法(因为webmethod其实就是WebService嘛，故此方 法对请求*.asmx也是有效的)，代码如下：

$.ajaxWebService  =  function (url, dataMap, fnSuccess) {
    $.ajax({
        type:  " POST " ,
        contentType:  " application/json " ,
        url: url,
        data: dataMap,
        dataType:  " json " ,
        success: fnSuccess
    });
}

　 　好了，这样我们请求webmethod方法 就可以这样写了：

$.ajaxWebService( " WebForm2.aspx/GetUserName " ,  " {} " ,  function (result) {
            ......
});

　　最后：如果你的项目中ajax程序非 常多(这种情况是可能存在的，我做过一个网站，是个sns，全程ajax，几乎每个操作都用了ajax),
 你觉得把WebMethod方法写在 各个aspx页面里很零散，那么你可以专门建一个页面(如：WebMethods.aspx)来存放。


----------------------  
function $ajax(sUrl,jsonData, fun)
{
$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: sUrl,
        data: jsonData,
        success: fun
    });
}

---------------------
function  deleteInfo(strId)
{

var url = "/aaaa/bbbb/cccc.aspx/RemoveInfo";

var data = '{"inforId" : "' +strId+ '"}';

    

$ajax(url,data, function(json){

        var strReturn = json.d;         

        alert(strReturn);

});    

}



<a href='javascript:void(0);'    οnclick='delInfor(<%#Eval("inforId") %>)'>[删除]</a>

----------------------------
[WebMethod]
public static string RemoveInfo(string inforId)
{
        
        return inforId;
} 

--第二篇------------------------------------

转自：http://www.cnblogs.com/henw/archive/2012/03/28/2420708.html

[WebMethod]   命名空间

1、无参数的调用, 注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

后台<C#>:

?

1 2 3 4 5 6 7

using System.Web.Script.Services;     [WebMethod]   public static string SayHello()   {         return "Hello Ajax!" ;   }

前台<JQuery>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                //要用post方式                type: "Post" ,                //方法所在页面和方法名                url: "data.aspx/SayHello" , //data : {},              contentType: "application/json; charset=utf-8" ,                dataType: "json" ,                success: function (data) {                    //返回的数据用data.d获取内容                    alert(data.d);                },                error: function (err) {                    alert(err);                }            });              //禁用按钮的提交            return false ;        });   });

2、带参数的方法调用

后台<C#>:

?

1 2 3 4 5 6 7

using System.Web.Script.Services;   [WebMethod] public static string GetStr( string str, string str2) {      return str + str2; }

前台<JQuery>: 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                type: "Post" ,                url: "data.aspx/GetStr" ,                //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字                data: "{'str':'我是','str2':'XXX'}" ,                contentType: "application/json; charset=utf-8" ,                dataType: "json" ,                success: function (data) {                    //返回的数据用data.d获取内容                      alert(data.d);                },                error: function (err) {                    alert(err);                }            });              //禁用按钮的提交            return false ;        });   });

3、返回数组方法的调用

后台<C#>:

?

1 2 3 4 5 6 7 8 9 10 11 12

using System.Web.Script.Services;   [WebMethod] public static List<string > GetArray() {      List< string > li = new List< string >();        for ( int i = 0; i < 10; i++)          li.Add(i + "" );        return li; }

前台<JQuery>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 56 57

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                type: "Post" ,                url: "data.aspx/GetArray" ,                contentType: "application/json; charset=utf-8" ,                dataType: "json" ,                success: function (data) {                    //插入前先清空ul                    $( "#list" ).html( "" );                      //递归获取数据                    $(data.d).each( function () {                        //插入结果到li里面                        $( "#list" ).append( "<li>" + this + "</li>" );                    });                    alert(data.d);                },                error: function (err) {                    alert(err);                }            });              //禁用按钮的提交            return false ;        });   });

4、返回Hashtable方法的调用

后台<C#>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

using System.Web.Script.Services; using System.Collections;   [WebMethod] public static Hashtable GetHash( string key, string value) {      Hashtable hs = new Hashtable();        hs.Add( "www" , "yahooooooo" );      hs.Add(key, value);            return hs; }

前台<JQuery>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                type: "Post" ,                url: "data.aspx/GetHash" ,                //记得加双引号 T_T                data: "{ 'key': 'haha', 'value': '哈哈！' }" ,                contentType: "application/json; charset=utf-8" ,                dataType: "json" ,                success: function (data) {                    alert( "key: haha ==> " +data.d[ "haha" ]+ "\n key: www ==> " +data.d[ "www" ]);                },                error: function (err) {                    alert(err + "err" );                }            });              //禁用按钮的提交            return false ;        });   });

5、操作xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

----------------XMLtest.xml------------------- ---------- view plaincopy to clipboardprint?------- <? xml version = "1.0" encoding = "utf-8" ?> < data > < item >      < id >1</ id >      < name >qwe</ name > </ item > < item >      < id >2</ id >      < name >asd</ name > </ item > </ data > <? xml version = "1.0" encoding = "utf-8" ?> < data > < item >      < id >1</ id >      < name >qwe</ name > </ item > < item >      < id >2</ id >      < name >asd</ name > </ item > </ data >

前台<JQuery>:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$( function () {        $( "#btnOK" ).click( function () {            $.ajax({                url: "XMLtest.xml" ,                dataType: 'xml' , //返回的类型为XML ，和前面的Json，不一样了                success: function (xml) {                    //清空list                    $( "#list" ).html( "" );                    //查找xml元素                  $(xml).find( "data>item" ).each( function () {                        $( "#list" ).append( "<li>id:" + $( this ).find( "id" ).text() + "</li>" );                        $( "#list" ).append( "<li>Name:" + $( this ).find( "name" ).text() + "</li>" );                    })                },                error: function (result, status) { //如果没有上面的捕获出错会执行这里的回调函数                    alert(status);                }            });              //禁用按钮的提交            return false ;        });   });