AJAX 页面登录
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginByAjax.aspx.cs" Inherits="LoginByAjax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>使用Ajax登录</title>
<script src="common/common.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
gel("btnLogin").onclick = doLogin;
xhr = createXmlHttp();//在页面加载完毕后创建一次就可以了
}
//1.获取文本框用户输入数据，验证用户输入不能为空
//2.首先验证 用户的验证码是否成功
//3.如果验证码服务器端验证成功，则验证用户名和密码
//4.如果登录通过，则显示登录成功信息，并跳转到首页
//5.如果登录失败，则显示登录失败信息
var xhr = false;
function doLogin() {
//获得dom元素
var txtUname = gel("txtName");
var txtUpwd = gel("txtPwd");
var txtCode = gel("txtCode");
//验证用户输入
if (validateInput(txtUname, txtUpwd, txtCode)) {
xhr.open("post", "LoginByAjax.aspx", true);//设置参数
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {//设置回调函数
if (xhr.readyState == 4) {//接收完服务器数据
if (xhr.status == 200) {//状态正常
var res = xhr.responseText;//获得服务区返回数据
var json = eval("(" + res + ")");//转成json对象
switch (json.status) {
case "1":
alert("验证码错误，请重新填写！");
break;
case "2":
alert("用户名或密码错误，请重新填写！");
break;
case "3":
alert("登录成功！");
window.location = "List.aspx";//跳转
break;
default:
alert("未知错误～～～请稍后再试！");
}
}
}
}
//encodeURIComponent 方法用来 进行url内的复杂字符(中文)加码
var data = "isPostback=1&txtName=" + encodeURIComponent(txtUname.value) + "&txtPwd=" + encodeURIComponent(txtPwd.value) + "&txtCode=" + encodeURIComponent(txtCode.value);
xhr.send(data);
}
}
//验证用户输入数据
function validateInput(txtUname, txtUpwd, txtCode) {
if (txtUname.value == "") {
alert("请输入用户名！～");
txtUname.focus();
return false;
} else if (txtUpwd.value == "") {
alert("请输入密码！～");
txtUpwd.focus();
return false;
} else if (txtCode.value == "") {
alert("请输入验证码！～");
txtCode.focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body>
用户名：<input id="txtName" name="txtName" type="text" /><br />
密码：<input id="txtPwd" name="txtPwd" type="text" /><br />
验证码：<input id="txtCode" name="txtCode" type="text" /><img onclick="this.src='ValidateCode.ashx?i='+new Date()" id="vcode" src="ValidateCode.ashx" /><br />
<input id="btnLogin" type="button" value="登录" />
<a href="Reg.aspx">注册</a>
</body>
</html>
。。。。。。。后台代码：。。。。。。。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class LoginByAjax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//进行登录业务操作
if (!string.IsNullOrEmpty(Request.Form["isPostback"]))
{
string strUname = Request.Form["txtName"];
string strPwd = Request.Form["txtPwd"];
string strCode = Request.Form["txtCode"];
//检查验证码 是否通过
if (!string.IsNullOrEmpty(strCode) && strCode == Session["vcode"].ToString())
{
if (strUname == "james" && strPwd == "123123")
{
Response.Write("{'status':'3'}");
}
else
{
Response.Write("{'status':'2'}");
}
}
else
{
Response.Write("{'status':'1'}");
}
Response.End();//立即向浏览器输出缓存数据，后面代码不执行了
}
}
}
浙公网安备 33010602011771号