【Asp.net】 Ajax小例子

简介: 【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,可以调用多个方法。

     

总结:

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


相关文章
|
7月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
53 1
|
7月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
109 0
|
7月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
320 2
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
79 0
解决.NET Core Ajax请求后台传送参数过大请求失败问题
解决.NET Core Ajax请求后台传送参数过大请求失败问题
|
开发框架 前端开发 JavaScript
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
ASP.Net Core中使用jquery-ajax-unobtrusive替换Ajax.BeginForm
201 0
|
3月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
44 7
|
3月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
68 0
|
4月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
53 0
|
4月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?