JQuery Ajax调用asp.net后台方法

1、无参数的方法调用

asp.net code：

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

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

JQuery code：

$(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、带参数的方法调用

asp.net code：

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

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:

<?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; 
}); 
});

要调用页面后台方法，首先得引用命名空间using System.Web.Services; 然后方法必须是静态方法，且方法须标记为[WebMethod]

关于Jquery中ajax方法data参数用法的总结