JQuery调用asp.net后台方法

1、无参数的方法调用

C# code：

using System.Web.Script.Services;    

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

[WebMethod]
public static string SayHello()
{
      return "Hello Ajax!";
}

注意：1.方法一定要静态方法，而且要有[WebMethod]的声明

JQuery code：

/// <reference path="jquery-1.4.2-vsdoc.js"/>    
$(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、带参数的方法调用

using System.Web.Script.Services;    

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

[WebMethod]
public static string GetStr(string str, string str2)
{
     return str + str2;
}

JQuery code：

/// <reference path="jquery-1.4.2-vsdoc.js"/>    
$(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、返回数组方法的调用

asp.net code：

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 code：

/// <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方法的调用

asp.net code：

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;    
}  
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 code：

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

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

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