利用JQuery直接调用asp.net后台方法-白红宇

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

阅读量：6271 次

发布时间：2019-06-22

本文共 6327 字，大约阅读时间需要 21 分钟。

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

[WebMethod] 命名空间

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

后台:

后台代码

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

前台:

前台代码

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         //禁用按钮的提交    20         return false;    21     });    22 });

2.带参数的方法调用

后台

1 using System.Web.Script.Services;  2    3 [WebMethod]  4 public static string GetStr(string str, string str2)  5 {  6     return str + str2;  7 }  8  9 10 本篇文章来源于 dotnet开源社区  原文链接：http://www.openaspx.com/article/201204/06/20120406090800.htm

前台

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         //禁用按钮的提交    20         return false;    21     });    22 });

3、返回数组方法的调用

后台

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

前台

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                 //递归获取数据    13                 $(data.d).each(function() {    14                     //插入结果到li里面    15                     $("#list").append("" + this + "
");    16                 });    17   18                 alert(data.d);    19             },    20             error: function(err) {    21                 alert(err);    22             }    23         });    24   25         //禁用按钮的提交    26         return false;    27     });    28 });  29 /// 
         30 $(function() { 31     $("#btnOK").click(function() { 32         $.ajax({ 33             type: "Post", 34             url: "data.aspx/GetArray", 35             contentType: "application/json; charset=utf-8", 36             dataType: "json", 37             success: function(data) { 38                 //插入前先清空ul 39                 $("#list").html(""); 40   41                 //递归获取数据 42                 $(data.d).each(function() { 43                     //插入结果到li里面 44                     $("#list").append("" + this + "
"); 45                 }); 46   47                 alert(data.d); 48             }, 49             error: function(err) { 50                 alert(err); 51             } 52         }); 53   54         //禁用按钮的提交 55         return false; 56     }); 57 });

4、返回Hashtable方法的调用

后台

1 using System.Web.Script.Services;  2 using System.Collections;  3    4 [WebMethod]  5 public static Hashtable GetHash(string key,string value)  6 {  7     Hashtable hs = new Hashtable();  8    9     hs.Add("www", "yahooooooo"); 10     hs.Add(key, value); 11       12     return hs; 13 }

前台

1 $(function() {     2     $("#btnOK").click(function() {     3         $.ajax({     4             type: "Post",     5             url: "data.aspx/GetHash",     6             //记得加双引号 T_T     7             data: "{ 'key': 'haha', 'value': '哈哈！' }",     8             contentType: "application/json; charset=utf-8",     9             dataType: "json",    10             success: function(data) {    11                 alert("key: haha ==> "+data.d["haha"]+"\n key: www ==> "+data.d["www"]);    12             },    13             error: function(err) {    14                 alert(err + "err");    15             }    16         });    17   18         //禁用按钮的提交    19         return false;    20     });    21 });

5、操作xml

xml

1 XMLtest.xml:  2    3 view plaincopy to clipboardprint?  4 
           5    6 
         
             7     
          
           1
             8     
          
           qwe
             9 
           10 
         
            11     
          
           2
            12     
          
           asd
            13 
           14   15 
         16  17 
         
           18     
          
           1
           19     
          
           qwe
           20 
          21 
         
           22     
          
           2
           23     
          
           asd
           24 
          25

前台

1 $(function() {     2     $("#btnOK").click(function() {     3         $.ajax({     4             url: "XMLtest.xml",     5             dataType: 'xml', //返回的类型为XML ，和前面的Json，不一样了     6             success: function(xml) {     7                 //清空list     8                 $("#list").html("");     9                 //查找xml元素 10                 $(xml).find("data>item").each(function() {    11                     $("#list").append("id:" + $(this).find("id").text() +"
");    12                     $("#list").append("Name:"+ $(this).find("name").text() + "
");    13                 })    14             },    15             error: function(result, status) { //如果没有上面的捕获出错会执行这里的回调函数    16                 alert(status);    17             }    18         });    19   20         //禁用按钮的提交    21         return false;    22     });    23 });