蛋吊红肿
在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;
}
}
好了，童鞋，你也赶紧的试一下吧！无刷新，你也是可以的!
