[Ajax]ajax学习与理解

发布时间：2020-07-15 16:34:22 阅读：309 作者：蓬莱仙羽栏目：开发技术

开发者测试专用服务器限时活动，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代码：

$(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;         });     });

页面代码：

    <form id="form1" runat="server">    <div>        <asp:Button ID="btnOK" runat="server" Text="验证用户" />    </div>    </form>

运行效果如下：

[Ajax]ajax学习与理解

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

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

JS代码：

$(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;         });     });

运行效果如下：

[Ajax]ajax学习与理解

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

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

JS代码：

$(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;         });     });

页面代码：

        <form   id="form1" runat="server">
  <div>
      <asp:Button   ID="btnOK" runat="server" Text="验证用户" />
  </div>
  <ul   id="list">
  </ul>
  </form>
  
    

运行结果图：

[Ajax]ajax学习与理解

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

[Ajax]ajax学习与理解

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签