利用JQuery直接调用asp.net后台方法

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。

[WebMethod]   命名空间

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

后台<C#>:

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

前台<JQuery>:

$(function() {    
    $("#btnOK").click(function() {    
        $.ajax({    
            //要用post方式    
            type: "Post",    
            //方法所在页面和方法名    
            url: "data.aspx/SayHello",    
            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#>:

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

前台<JQuery>:

$(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#>:

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>:

$(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;    
    });    
});  
/// <reference path="jquery-1.4.2-vsdoc.js"/> 
$(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#>:

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>:

$(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"]+"
 key: www ==> "+data.d["www"]);    
            },    
            error: function(err) {    
                alert(err + "err");    
            }    
        });    
  
        //禁用按钮的提交    
        return false;    
    });    
});

5、操作xml 

<?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>:

$(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;    
    });    
});