WebForm有两种两种开发方式:
(1).aspx前台页面+后台.cs事件代码
(2)html静态页面+ajax+ashx一般处理程序
第一种开发方式思路比较明了,直接在页面中拖拉控件,在后台为该控件添加事件代码。
第一种开发方式想必大家都很熟悉了,今天就结合自己最近学习的内容借由第二种开发方式做一个简单的登陆,锻炼一下自己(代码比较简单,重要的是思路)。
1、新建项目
首先新建了一个项目LoginDemo,在此基础上又添加了一个一般处理程序BackLogin.ashx,具体代码如下
没有牵扯到数据库查询,在这写的比较简单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表单形式
<form action="BackLogin.ashx" method="post">
<input type="text" name="username" value="{num}" />
<input type="password" name="password" />
<input type="submit" value="登陆" />
</form>
2.异步Post方式
<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
<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>
4、运行效果
输入001,0010用户名、密码时浏览器显示如下:
5、反思
第一种实现方式不是异步,不能很好的起到效果,ajax异步比Post操作更底层。
6、易犯错误
1.<input>标签内的name值与一般处理程序中获取form表单的name不一致
2.各种{ }()匹配不准确,造成不易察觉的语法错误
7、总结
编程序一定要先有思路,在思路的引导下,细心再细心