菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)

你若决定灿烂,倒影也会美得让人惊叹。早安!幸运从来不是偶然,你所做的每件事,都会有惊喜等待着你。早安。
好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的。 在login.html页面中其代码如下:
 
<head>
<title>无刷新登录</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function () {
$(this).show(); //显示span里面的内容
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function () {
$(this).html("请求处理已经完成!").hide();
})
$("#btnSure").click(function () {//点击按钮事件
var $name = $("#txtName");//获取登录名
var $pwd = $("#txtPwd");//获取密码
if ($name.val() != "" && $pwd.val() != "") {
//调用Login()方法
Login($name.val(),$pwd.val());
} else {
if ($name.val() == "") {//如果登录名不为空
alert("登录名不能为空!");
$name.focus();//获取焦点
return false;
} else {
alert("密码不能为空!");
$pwd.focus();
return false;
}
}
})
})
function Login(name, password) {
$.ajax({
type: "POST", //数据请求的方式(post或get),默认为get
url: "DealData.aspx", //发送请求的地址(默认为当前页)
data: "action=Login&date=" + new Date() + "&name=" + name + "&pwd=" + password,//发送到服务器的数据
//登录成功后返回的数据
success: function (data) {
if (data == "True") {//根据返回值进行判断(注意:Ture写成true应该会出错吧!)
alert("登录成功!");
//window.location = "1.htm";要跳转的页面
} else {
alert("登录名或密码错误!");
return false;
}
}
});
}
</script>
</head>
<body style="text-align:center">
<div>登录名:<input type="text" id="txtName" value="" /></div>
<br />
<div>密 码:<input type="text" id="txtPwd" value="" /></div><br />
<div>
<input type="reset" value="确定" id="btnSure" />
</div>
<span id="divMsg" style="display:none;">正在发送请求......</span>
</body>
</html>

在DealData.aspx中,其后台代码如下:
 
public partial class ManageData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = System.Web.HttpUtility.UrlDecode(Request["name"]);//获取登录名
string pwd = System.Web.HttpUtility.UrlDecode(Request["pwd"]);//获取密码
Response.Write(Login(name, pwd));
Response.End();
}
private bool Login(string name, string pwd)
{
bool result = false;
if (name == "小菜" && pwd=="123456")
{
return true;
}
return result;
}
}

好了,童鞋,你也赶紧的试一下吧!无刷新,你也是可以的!

以上就是菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)。爱拼才会赢,这不仅仅是一句宣言,而是一种态度。一种乐观向上的态度。一种端正的态度。请相信,有什么样的态度,就有什么样的结果。有什么样的态度,就有什么样的人生与未来。端正的态度,毫不夸张的说。就是成功了一大半。我们自己的态度,决定了我们的人生。更多关于菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
编写轻量ajax组件第三篇实现

实现AJAX异步调用和局部刷新的基本步骤

Ajax实现上传图像功能的示例详解

Ajax校验用户名是否存在的方法

AJAX请求数据及实现跨域的三种方法详解