温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

[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代码:
[Ajax]ajax学习与理解
$(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;         });     });   
[Ajax]ajax学习与理解
页面代码:
    <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代码:
[Ajax]ajax学习与理解
$(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学习与理解
运行效果如下:

[Ajax]ajax学习与理解

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

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

JS代码:

[Ajax]ajax学习与理解
$(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;         });     }); 
[Ajax]ajax学习与理解

页面代码:

<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问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

j aja
AI

开发者交流群×