JQuery的$.ajax()调用asp.net的后台方法样例代码

 引入头文件：

                               using System.Web.Script.Services;
                               using System.EnterpriseServices;
                               using System.Web.Services;

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",              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(stringstr, string str2) {     returnstr + 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 +"");     returnli; }

前台<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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 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;       });   }); /// <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#>:

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(stringkey,string value) {     Hashtable hs =new Hashtable();     hs.Add("www","yahooooooo");     hs.Add(key, value);         returnhs; }

前台<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? <?xmlversion="1.0"encoding="utf-8"?> <data> <item>     <id>1</id>     <name>qwe</name> </item> <item>     <id>2</id>     <name>asd</name> </item> </data> <?xmlversion="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;       });   });