jQuery AJAX实现调用页面后台方法

àì夳堔傛蜴生んèń 2022-09-18 14:56 159阅读 0赞

1.新建demo.aspx页面。  
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;

3.无参数的方法调用.

大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。
    后台代码：

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

JS代码：

![复制代码][copycode.gif]

$(function() {     
        $("#btnOK").click(function() {     
            $.ajax({     
                //要用post方式      
                type: "Post",     
                //方法所在页面和方法名      
                url: "Demo.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;     
        });     
    });

![复制代码][copycode.gif]

页面代码：

运行效果如下：

![2012031421243392.jpg][]

3.有参数方法调用
    后台代码：

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

JS代码：

![复制代码][copycode.gif]

$(function() {     
        $("#btnOK").click(function() {     
            $.ajax({     
                type: "Post",     
                url: "demo.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;     
        });     
    });

![复制代码][copycode.gif]

运行效果如下：

![2012031421264324.jpg][]

4.返回数组方法  
后台代码：

![复制代码][copycode.gif]

[WebMethod]     
    public static List<string> GetArray()     
    {     
        List<string> li = new List<string>();     
        
        for (int i = 0; i < 10; i++)     
            li.Add(i + "");     
        
        return li;     
    }

![复制代码][copycode.gif]

JS代码：

![复制代码][copycode.gif]

$(function() {     
        $("#btnOK").click(function() {     
            $.ajax({     
                type: "Post",     
                url: "demo.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;     
        });     
    });

![复制代码][copycode.gif]

页面代码：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div> 
      <code>&lt;form id=</code> 
      <code>"form1"</code> 
      <code>runat=</code> 
      <code>"server"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;asp:Button ID=</code> 
      <code>"btnOK"</code> 
      <code>runat=</code> 
      <code>"server"</code> 
      <code>Text=</code> 
      <code>"验证用户"</code> 
      <code> /&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt;</code> 
     </div> 
     <div> 
      <code>&lt;ul id=</code> 
      <code>"list"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/ul&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/form&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

运行结果图：

![2012031421291686.jpg][]

[copycode.gif]: /images/20220828/9babfd1013144ec8b5bfd8046834a48f.png
[2012031421243392.jpg]: /images/20220828/b6bd1ccbc49c414b8a2ff2e2ca846ad9.png
[2012031421264324.jpg]: /images/20220828/0e192f21a0f24243b48cdb593c206722.png
[Link 1]: http://www.cnblogs.com/xuebinding/archive/2012/03/01/2376041.html#
[2012031421291686.jpg]: /images/20220828/c58af4f4f1674928b9a75156f74bf6fe.png