最近在学习一般处理程序，也学习了一些jQuery的异步操作，于是就想着亲手做一个小的登陆，锻炼一下自己。
1、首先新建了一个项目LoginDemo,在此基础上又添加了一个一般处理程序BackLogin.ashx,具体代码如下
| 1 | ///<span style="font-family: Arial, Helvetica, sans-serif;" class="">没有牵扯到数据库查询，在这写的比较简单</span> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | public class BackLogin : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain" ; string username = context.Request.Form[ "username" ]; string password = context.Request.Form[ "password" ]; if (username == " " || password == " " ) { context.Response.Write( "请填写用户名或密码！" ); } else { if (username == "001" && password == "001" ) { context.Response.Write( "success" ); } else { context.Response.Write( "用户名或密码错误，请重新登录！" ); } } context.Response.End(); } public bool IsReusable { get { return false ; } } } |
2、添加一个Web页面Login.aspx,作为登陆页面，浏览器效果图如下所示
3、三种实现方式
1. Form表单形式
| 1 2 3 4 5 | <form action= "BackLogin.ashx" method= "post" > <input type= "text" name= "username" value= "{num}" > <input type= "text" name= "password" > <input type= "submit" value= "登陆" > </form> |
2、异步Post方式
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type= "text/javascript" > $(function () { $( "#Login" ).click(function () { $.post( "BackLogin.ashx" , { "username" : $( "#username" ).val(), "password" : $( "#password" ).val() }, function (msg) { if (msg == "success" ) { alert( "登陆成功" ); } else if (msg == "用户名或密码错误，请重新登录！" ) { alert( "登录失败！" ); } else { alert( "请输入用户名和密码！" ); } }); }); // $("form1").submit(); }) </script> |
3、异步ajax
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type= "text/javascript" > $(document).ready(function () { $( "#Login" ).click(function () { $.ajax({ url: "BackLogin.ashx" , type: "POST" , data: "username=" + escape($( '#username' ).val()) + "&password=" + escape($( '#password' ).val()), dataType: "text/plain" , async: "true" , success: function (msg) { var data = eval( "(" + msg.d + ")" ); if (data == "success" ) { alert( "登陆成功！" ); } else { alert( "登录失败！" ); } } }); }) }); </script> |
输入001,0010用户名、密码时浏览器显示如下：
编程序一定要先有思路，在思路的引导下，细心再细心