1.简单版
AjaxLogin.html代码：
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var name = $("#name").val();
var pwd = $("#pwd").val();
$.ajax({
type: "post",
url: "AjaxLogin.ashx",
data: { name: name, pwd: pwd },
success: function (data) {
var strs = $.parseJSON(data);
if (strs.Status == "ok") {
alert(strs.Msg);
}
else if (strs.Status == "error") {
alert(strs.Msg);
}
else {
alert("服务器返回信息出错");
}
},
error: function () {
alert("登录请求失败");
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name" value="" />
<input type="text" id="pwd" value="" />
<input type="button" id="btn" value="确定" />
</body>
</html>
AjaxLogin.ashx代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string name = context.Request["name"];
string pwd = context.Request["pwd"];
if (name == "admin" && pwd == "")
{
string json = new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "登录成功" });
context.Response.Write(json);
}
else
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "登录失败" });
context.Response.Write(json);
}
}
2.完整版
Login.html代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>登录</title>
<script src="jquery-1.5.2.js"></script>
<script type="text/javascript">
$(function () {
$("#imgValidCode").click(function () {
$("#imgValidCode").attr("src", "LoginValidCode.ashx?" + new Date());
}); $("#btnLogin").click(function () {
var username = $("#username").val();
var password = $("#password").val();
var validCode = $("#validCode").val();
$.ajax({
type: 'post', url: 'Login1.ashx', data: { username: username, password: password ,validCode:validCode},
success: function (data) {
if (data.Status == "ok") {
alert("登录成功");
}
else if (data.Status == "error") {
alert("出错啦！" + data.Msg);
}
else {
alert("服务器返回信息未知");
}
},
error: function () {
alert("登录请求失败");
}
});
});
}); </script>
</head>
<body>
<table>
<tr><td>用户名：</td><td><input type="text" id="username" /></td></tr>
<tr><td>密码：</td><td><input type="password" id="password" /></td></tr>
<tr><td><img src="LoginValidCode.ashx" id="imgValidCode" /></td><td><input type="text" id="validCode" /></td></tr>
<tr><td><input type="button" id="btnLogin" value="登录" /></td><td></td></tr>
</table>
</body>
Login.ashx代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string username = context.Request["username"];
string password = context.Request["password"];
string validCode = context.Request["validCode"]; //sesssion中的验证
string serverValidCode = (string)context.Session[LoginValidCode.LOGINVALIDCODE];
if (validCode != serverValidCode)
{
string json = new JavaScriptSerializer().Serialize(new { Status="error",Msg="验证码错误"});
context.Response.Write(json);
return;
}
DataTable dtUsers = SqlHelper.ExecuteQuery("select * from T_Users where UserName=@UserName",
new SqlParameter("@UserName",username));
if (dtUsers.Rows.Count <= )
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "用户名不存在" });
context.Response.Write(json);
return;
}
if (dtUsers.Rows.Count > )
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "系统出错，请联系管理员" });
context.Response.Write(json);
return;
}
DataRow rowUser = dtUsers.Rows[];
string dbPassword = (string)rowUser["Password"];
if (dbPassword == password)
{
string json = new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "登录成功" });
context.Response.Write(json);
}
else
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "密码错误" });
context.Response.Write(json);
}
}