本文介绍了如何使用JavaScript的Ajax技术进行用户登录验证。通过js部分的代码展示了点击登录按钮时，如何阻止页面刷新并发送POST请求到后端UserLogin.aspx进行用户名和密码的验证。在后端，通过检查用户名和密码，返回不同的状态码来告知前端登录结果，如用户名不存在、密码错误或登录成功。整个流程涉及前端验证、Ajax通信及后端处理。
因为工作需要研究了一下 js的ajax，下面是成果。
主要是三部分：
一、js部分 友情提示注意js部分中的 $("#btn_login")中的return false；这个可以阻止回转服务器不然还是会刷新
$(document).ready(function () {
$("#btn_login").click(function () {
postlogin();
return false;
});
});
function postlogin() {
if (checkUserName() && checkUserPwd()) {
var username = $('#txt_loginname').val();
var userpass = $('#txt_loginpass').val();
$.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
if (result == "1") {
alert("登录成功！");
} else if (result == "3") {
alert("用户名不正确!");
} else if (result == "2") {
alert("密码不正确!");
} else {
alert("登录失败!请重试!" + result);
}
});
}
}
function checkUserName() {
if ($("#txt_loginname").val().length == 0) {
alert('用户名不能为空!');
return false;
} else {
return true;
}
}
function checkUserPwd() {
if ($("#txt_loginpass").val().lenght == 0) {
alert('密码不正确!');
return false;
} else {
return true;
}
}
二、页面部分
| 用户名： | |
| 密 码： | |
三、后台部分也就是在js中转向的处理登录信息的页面
protected void Page_Load(object sender, EventArgs e)
{
string username = Request.Form["UserName"];
string userpass = Request.Form["UserPass"];
T_User user = UserManager.loginpassword(username, userpass);
if (user != null)
{
Session["user"] = user;
Response.Write("1"); //登录成功
Response.End();
}
else
{
if (UserManager.OnlyOne(username) >= 1)
{
Response.Write("2"); //密码不正确
Response.End();
}
else
{
Response.Write("3"); //用户名不存在
Response.End();
}
}
}
扫一扫
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
