JQuery直接调用asp.net后台WebMethod方法（转）

转自  http://blog.csdn.net/handsometone1982/article/details/7684894

利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod]   命名空间

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

[csharp] view plaincopy

1. using System.Web.Script.Services;
2. [WebMethod]
3. public static string SayHello()
4. {
5. return "Hello Ajax!";
6. }

前台<JQuery>:

[javascript] view plaincopy

1. $(function() {
2. $("#btnOK").click(function() {
3. $.ajax({
4. //要用post方式
5. type: "Post",
6. //方法所在页面和方法名
7. url: "data.aspx/SayHello",
8. contentType: "application/json; charset=utf-8",
9. dataType: "json",
10. success: function(data) {
11. //返回的数据用data.d获取内容
12. alert(data.d);
13. },
14. error: function(err) {
15. alert(err);
16. }
17. });
18. //禁用按钮的提交
19. return false;
20. });
21. });

2、带参数的方法调用

后台<C#>:

[csharp] view plaincopy

1. using System.Web.Script.Services;
2. [WebMethod]
3. public static string GetStr(string str, string str2)
4. {
5. return str + str2;
6. }

前台<JQuery>:

[javascript] view plaincopy

1. $(function() {
2. $("#btnOK").click(function() {
3. $.ajax({
4. type: "Post",
5. url: "data.aspx/GetStr",
6. //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
7. data: "{‘str‘:‘我是‘,‘str2‘:‘XXX‘}",
8. contentType: "application/json; charset=utf-8",
9. dataType: "json",
10. success: function(data) {
11. //返回的数据用data.d获取内容
12. alert(data.d);
13. },
14. error: function(err) {
15. alert(err);
16. }
17. });
18. //禁用按钮的提交
19. return false;
20. });
21. });

3、返回数组方法的调用

后台<C#>:

[csharp] view plaincopy

1. using System.Web.Script.Services;
2. [WebMethod]
3. public static List<string> GetArray()
4. {
5. List<string> li = new List<string>();
6. for (int i = 0; i < 10; i++)
7. li.Add(i + "");
8. return li;
9. }

前台<JQuery>:

[javascript] view plaincopy

1. $(function() {
2. $("#btnOK").click(function() {
3. $.ajax({
4. type: "Post",
5. url: "data.aspx/GetArray",
6. contentType: "application/json; charset=utf-8",
7. dataType: "json",
8. success: function(data) {
9. //插入前先清空ul
10. $("#list").html("");
11. //递归获取数据
12. $(data.d).each(function() {
13. //插入结果到li里面
14. $("#list").append("<li>" + this + "</li>");
15. });
16. alert(data.d);
17. },
18. error: function(err) {
19. alert(err);
20. }
21. });
22. //禁用按钮的提交
23. return false;
24. });
25. });