Ajax登录
使用jQuery.Ajax（）实现登录功能
logintest.html–主界面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用户登录</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#imgvalidcode").click(function () {
$("#imgvalidcode").attr("src", "LoginValidCode.ashx?" + new Date());//增加当前时间，避免get方式请求的缓存，导致图片不刷新问题
});//图片点击函数
$("#btnlogin").click(function () {
//使用Ajax发送请求
$.ajax({
type: 'post', url: 'LoginTest.ashx',
data: { username: $("#username").val(), password: $("#password").val(), validcode: $("#validcode").val() },//传递请求报文
success:function(data){ //1.success只是通讯成功
//2.接下来是进行详细的验证
if (data.Status=="ok") {
alert(data.Msg);
} 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></tr>
</table>
</body>
</html>LoginValidCode.ashx–生成验证码的类
<%@ WebHandler Language="C#" Class="LoginValidCode" %>
using System;
using System.Web;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web.SessionState;
public class LoginValidCode : IHttpHandler, IRequiresSessionState//5.一般处理程序调用session需要这个接口，否则出错
{
//4.设定一个常量
public const string LOGINVALIDCODE = "loginvalidcode";
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "image/jpeg";//1.修改返回的报文类型是图片的格式
//2.产生四位数的随机数
Random rand = new Random();
int i = rand.Next(1000, 9999);
//4.将生成的验证码存入到session变量中
context.Session[LOGINVALIDCODE] = i.ToString();
//3.绘制出四位数的验证码
using(Bitmap bmp=new Bitmap(80,28))
{
using(Graphics g=Graphics.FromImage(bmp))
using(Font font=new Font(FontFamily.GenericSansSerif,20))
{
g.DrawString(i.ToString(), font, Brushes.Red, new PointF(0, 0));
}
bmp.Save(context.Response.OutputStream,ImageFormat.Jpeg);//保存图片到输出流中
}
}
public bool IsReusable {
get {
return false;
}
}
}LoginTest.ashx–登录一般处理程序
<%@ WebHandler Language="C#" Class="LoginTest" %>
using System;
using System.Web;
using System.Web.SessionState;
using System.Web.Script.Serialization;
using System.Data;
using Web1;
public class LoginTest : IHttpHandler, IRequiresSessionState//1。实现接口
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";//转为json格式，采用第三种方式传递json
string username = context.Request["username"];
string password=context.Request["password"];
string validcode=context.Request["validcode"];
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 dUsers = SqlHelper.ExecuteQuery("select * from T_users where UserName=@UserName",
new System.Data.SqlClient.SqlParameter("@UserName", username));
if (dUsers.Rows.Count<=0)
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "用户名不存在" });
context.Response.Write(json);
return;
}
if (dUsers.Rows.Count>1)
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "用户名已经存在" });
context.Response.Write(json);
return;
}
DataRow rowUser=dUsers.Rows[0];
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);
}
// context.Response.Write(this.GetType().Assembly.Location);//显示当前程序集的位置
}
public bool IsReusable {
get {
return false;
}
}
}出现的问题：
这里写图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读