【Asp.net】 Ajax小例子-阿里云开发者社区

【Asp.net】 Ajax小例子

2023-06-20 101

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Asp.net】 Ajax小例子

ajax的作用是用来进行异步http请求，获取远程数据。在实践中，能学到好多。这不在实践中把ajax给理解了一些。积累了两种Asp.net程序使用ajax的方式。

1、通过一般处理程序.ashx

vs目录如下图：

（1）新建个web页面(.aspx)，写一个简单的html页面。

1. <form id="form1" runat="server" method="post">
2. <div >
3. <div id="prompt"></div>
4. <div>
5. <label>账号</label>
6. <input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" />
7. <button type="button" id="FqAuthcode" runat="server" >
8.                     获取验证码
9. </button>
10. </div>
11. </div>
12. </form>

（2）引入jquery文件，写ajax传值方法。

1. <script src="../js/jquery.min.js"></script>
2. <script type="text/javascript">
3.         $(function () {
4. //获取验证码
5.             $("#FqAuthcode").bind("click", function () {
6. 
7. var _loginname = $("#personalnewphone").val();
8. 
9. if (_loginname == '') {
10.                     $('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空');
11. return false;
12.                 }
13.                 $.post("../ajax/Getcode.ashx", { action: 'register', loginname: _loginname }, function (data) {
14. if (data.code == 10000) {
15.                         $("#sub-btn-box").removeClass('hidden');
16.                         $(".personalcode").css("display", "block");
17.                         $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
18.                     } else {
19.                         $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
20.                     }
21. console.log(data.message);
22.                 }, 'json');
23.             });
24. 
25.       });
26. </script>

$post方法与$get方法是在jquery中高层实现常用的。post与get方法的区别跟字面意思的区别一样。post是向指定的资源提交要处理的数据。get是从指定的资源请求数据。例子中的业务需求是，把手机号提交到后台，进行存在性验证，以及给该手机号发验证码等处理。需要把页面中的手机号提交，因此用post方法。

例子中的需求还可以通过jquery底层ajax实现。

1.                 $.ajax({
2. url: "../ajax/Getcode.ashx", async:false,data:{ action: 'register', loginname: _loginname }, success: function (data) {
3. if (data.code == 10000) {
4.                             $("#sub-btn-box").removeClass('hidden');
5.                             $(".personalcode").css("display", "block");
6.                             $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
7.                         } else {
8.                             $('#prompt').removeClass('hidden').addClass('text-danger').html(data.message);
9.                         }
10.                     }, dataType: "json"
11.                 });

（3）新建一个一般处理程序，接收通过ajax方法传过来的值，进行处理，然后返回ajax方法。

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Text;
6. 
7. namespace Asp.net_Ajax_Demo1.ajax
8. {
9. /// <summary>
10. /// Handler1 的摘要说明
11. /// </summary>
12. public class Handler1 : IHttpHandler
13.     {
14. 
15. public void ProcessRequest(HttpContext context)
16.         {
17. //context.Response.ContentType = "text/plain";
18.             context.Response.ContentType = "text/html;charset=utf-8";
19. //获取传过来的参数
20. string action = context.Request.Params["action"]; //方法名称
21. string loginname = context.Request.Params["loginname"]; //要重置密码的账号
22. 
23. 
24. //调用函数
25. string json = GetJsonStr(action, loginname);
26.             context.Response.Write(json);//返回处理结果
27.             context.Response.ContentEncoding = System.Text.Encoding.UTF8;
28.             context.Response.End();
29.         }
30. 
31. public bool IsReusable
32.         {
33. get
34.             {
35. return false;
36.             }
37.         }
38. 
39. private string GetJsonStr(string action, string loginname) {
40.             StringBuilder jsonString = new StringBuilder();
41. switch (action)
42.             {
43. case "register"://注册发送验证码
44. //TODO:发送验证码方法省略
45. 
46.                     jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}");
47. break;
48. default:
49.                     jsonString.Append("{\"code\":\"1\",\"message\":\"未知错误，请联系管理员\"}");
50. break;
51.             }
52. 
53. return jsonString.ToString();
54. 
55.         }
56.     }
57. }

之所以用switch判断，是为了用同一个一般处理程序（Handler）处理多个ajax请求。如果不用switch判断的话，就要建立多个Handler。

效果如图所示：

2、不通过一般处理程序.aspx

目录结构如图：

（1）新建webservice页面（.asmx）。取消注释行，使用web服务

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Web;
5. using System.Web.Services;
6. using System.Text;
7. 
8. namespace WebApplication1.web
9. {
10. /// <summary>
11. /// WebService1 的摘要说明
12. /// </summary>
13.     [WebService(Namespace = "http://tempuri.org/")]
14.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
15.     [System.ComponentModel.ToolboxItem(false)]
16. // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 
17.     [System.Web.Script.Services.ScriptService]
18. public class WebService1 : System.Web.Services.WebService
19.     {
20. 
21.         [WebMethod]
22. public string HelloWorld()
23.         {
24. return "Hello World";
25.         }
26. 
27.         [WebMethod]
28. public string GetCode(string loginname)
29.         {
30.             StringBuilder jsonString = new StringBuilder();
31. 
32. //TODO:发送验证码方法省略
33.             jsonString.Append("{\"code\":\"10000\",\"message\":\"验证码发送成功\"}");
34. return jsonString.ToString();
35.         }
36.     }
37. }

（2）新建web页面（.aspx）。添加页面基本元素及布局。添加ScriptManager，用来相应webservice

1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.web.WebForm1" %>
2. 
3. <!DOCTYPE html>
4. 
5. <html xmlns="http://www.w3.org/1999/xhtml">
6. <head runat="server">
7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8. <title>ajax_demo2</title>
9. </head>
10. <body>
11. <form id="form1" runat="server">
12. 
13.         <%--响应webservice--%>
14. <asp:ScriptManager ID="clientService" runat="server">
15. <Services>
16. <asp:ServiceReference Path="~/web/WebService1.asmx" /><%--webservice路径--%>
17. </Services>
18. </asp:ScriptManager>
19. 
20. 
21. <div >
22. <div id="prompt"></div>
23. <div>
24. <label>账号</label>
25. <input type="text" id="personalnewphone" value="15712345678" placeholder="邮箱/手机号" runat="server" />
26. <button type="button" id="FqAuthcode" runat="server" >
27.                     获取验证码
28. </button>
29. </div>
30. </div>
31. </form>
32. 
33. </body>
34. </html>

（3）引用jquery文档，js编写

1. <script src="../js/jquery.min.js"></script>
2. <script type="text/javascript">
3.         $(function () {
4. //获取验证码
5.             $("#FqAuthcode").bind("click", function () {
6. 
7. 
8. var _loginname = $("#personalnewphone").val();
9. 
10. if (_loginname == '') {
11.                     $('#prompt').removeClass('hidden').addClass('text-danger').html('手机或邮箱不能为空');
12. return false;
13.                 }
14. 
15. 
16. //webservice方法
17. //要调用的方法的完整路径，WebService命名空间.WebService类名.方法名
18. WebApplication1.web.WebService1.GetCode(_loginname, function (data) {
19. //响应成功
20. 
21. var json=$.parseJSON(data);//把字符串转成json格式
22. if (json.code == 10000) {
23.                         $("#sub-btn-box").removeClass('hidden');
24.                         $(".personalcode").css("display", "block");
25.                         $('#prompt').removeClass('hidden').addClass('text-danger').html(json.message);
26.                     } else {
27.                         $('#prompt').removeClass('hidden').addClass('text-danger').html(json.message);
28.                     }
29. 
30.                 }, function () {
31. //响应失败
32. setContainer('Error!');
33.                 });
34. 
35. 
36.             });
37. 
38.         });
39. </script>

效果如图：

对比：

jQuery调用Handler几乎完美了，但是不能处理多个方法。用webService和ScriptManager，可以调用多个方法。

总结：

有了理论要在实践中去验证，验证过了还要总结成理论。

【Asp.net】 Ajax小例子

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Asp.net】 Ajax小例子

热门文章

最新文章

相关课程

相关电子书