ajax异步登陆页面无法跳转解决办法
ajax异步登陆页面无法跳转
我在做一个登陆界面,用ajax异步
登陆失败:登陆框显示一句错误信息,不喜欢alert弹出框。
登陆成功:根据用户的身份跳转到不同的页面。
<script type="text/javascript">
$(function () {
$('#btnlogin').click(function () {
$.ajax({
type: "post", //客户端向服务器发送请求时采取的方式
contentType: "application/json", //指定客户端发送给服务器的内容的类型以及服务器返回给客户端内容的类型为json格式
url: "WebService1.asmx/ValidateUser", //指明客户端要向哪个页面里面的哪个方法发送请求
data: "{user:'" + $('#auth_email').val() + "',pass:'" + $('#auth_password').val() + "'}", //指定伴随发送的请求传递到服务器的参数
// data:$('#authentication').serialize(),
async: false,
success: function (result) {//客户端调用服务器端方法成功后执行的回调函数
if (result.d == "false") {
var alertbox = document.getElementById("alertmessage");
alertbox.style.display = "block";
return false;
// alert("登录失败");
}
else if (result.d == "A") {
alert(result.d);
location.href = "http://www.baidu.com";
}
}
})
})
})
</script>
问题:
1. 错误信息能显示,但是闪一下之后整个页面更新,能不能只让error message显示,而不更新整个页面?
2. 跳转遇到问题,貌似跟async: false有关?
3. 原本判断用户身份跳转不同界面的代码放在aspx.cs当中,跳转带session,这部分现在要怎么处理比较好?放在webservice里面吗?
菜鸟一个,问题有点多,求大神指点。
------解决思路----------------------
这里写 return false; 豪无意义,加之 javascript 也不会给你检查出语法和逻辑的基本错误,所以你需要靠加强对javascript、函数、异步操作机制的理解才行。
这里写 return ...,只是对 success: function (result){} 的返回值。而 btnlogin 的 click 早就完成了。你根本没有为 click 事件返回 false。
你应该在最外层返回 false,而不是在回调函数内写。例如
})
});
return false;
})
其实如果使用 ajax,那么你就不应该使用 <form>提交页面回发的。删除 <form>要比写一个 return false更重要,而且这样也就不需要写 return false 了 。
------解决思路----------------------
这是我常用的:
------解决思路----------------------
我在做一个登陆界面,用ajax异步
登陆失败:登陆框显示一句错误信息,不喜欢alert弹出框。
登陆成功:根据用户的身份跳转到不同的页面。
<script type="text/javascript">
$(function () {
$('#btnlogin').click(function () {
$.ajax({
type: "post", //客户端向服务器发送请求时采取的方式
contentType: "application/json", //指定客户端发送给服务器的内容的类型以及服务器返回给客户端内容的类型为json格式
url: "WebService1.asmx/ValidateUser", //指明客户端要向哪个页面里面的哪个方法发送请求
data: "{user:'" + $('#auth_email').val() + "',pass:'" + $('#auth_password').val() + "'}", //指定伴随发送的请求传递到服务器的参数
// data:$('#authentication').serialize(),
async: false,
success: function (result) {//客户端调用服务器端方法成功后执行的回调函数
if (result.d == "false") {
var alertbox = document.getElementById("alertmessage");
alertbox.style.display = "block";
return false;
// alert("登录失败");
}
else if (result.d == "A") {
alert(result.d);
location.href = "http://www.baidu.com";
}
}
})
})
})
</script>
问题:
1. 错误信息能显示,但是闪一下之后整个页面更新,能不能只让error message显示,而不更新整个页面?
2. 跳转遇到问题,貌似跟async: false有关?
3. 原本判断用户身份跳转不同界面的代码放在aspx.cs当中,跳转带session,这部分现在要怎么处理比较好?放在webservice里面吗?
菜鸟一个,问题有点多,求大神指点。
------解决思路----------------------
这里写 return false; 豪无意义,加之 javascript 也不会给你检查出语法和逻辑的基本错误,所以你需要靠加强对javascript、函数、异步操作机制的理解才行。
这里写 return ...,只是对 success: function (result){} 的返回值。而 btnlogin 的 click 早就完成了。你根本没有为 click 事件返回 false。
你应该在最外层返回 false,而不是在回调函数内写。例如
})
});
return false;
})
其实如果使用 ajax,那么你就不应该使用 <form>提交页面回发的。删除 <form>要比写一个 return false更重要,而且这样也就不需要写 return false 了 。
------解决思路----------------------
这是我常用的:
$.ajax({
cache: false,
type: "POST",
url: 'Data.ashx?action=logon&rand=' + Math.random(),
data: $('#frmLogon').serialize(),
dataType: 'json',
success: function (msg) {
switch ($.trim(msg)) {
case '1':
window.location.href = '/Default.aspx?rand=' + Math.random();
break;
case '2':
$("#errorMessage").html('验证码错误');
break;
case '8':
$("#errorMessage").html('该账号没有管理权限');
break;
case '9':
$("#errorMessage").html('账号已被禁用');
break;
default:
$("#errorMessage").html('账号或密码错误');
break;
}
},
error: function () {
$("#errorMessage").html('系统异常!请重新登录,或者稍候再试');
enableSaveModify();
}
});
------解决思路----------------------
<script type="text/javascript">
$(function () {
$('#btnlogin').click(function () {
$.ajax({
type: "post", //客户端向服务器发送请求时采取的方式
contentType: "application/json", //指定客户端发送给服务器的内容的类型以及服务器返回给客户端内容的类型为json格式
url: "WebService1.asmx/ValidateUser", //指明客户端要向哪个页面里面的哪个方法发送请求
data: "{user:'" + $('#auth_email').val() + "',pass:'" + $('#auth_password').val() + "'}", //指定伴随发送的请求传递到服务器的参数
// data:$('#authentication').serialize(),
async:true,
success: function (result) {//客户端调用服务器端方法成功后执行的回调函数
if (result.d == "false") {
var alertbox = document.getElementById("alertmessage");
alertbox.style.display = "block";
alert("登录失败");
}
else if (result.d == "A") {
alert(result.d);
location.href = "http://www.baidu.com";
}
}
})
return false;
})
})
</script>