最近在学习一般处理程序,也学习了一些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>
|
4、运行效果
输入001,0010用户名、密码时浏览器显示如下:
编程序一定要先有思路,在思路的引导下,细心再细心