ajax控制页面跳转

一开始我是这么写的,一直报错,跳转路径解析不了,显示为问号:

ajax控制页面跳转

前台html:

<form>
<table style="margin: 200px auto;">
<tr>
<td><label for="login_userName">用户名</label></td>
<td><input type="text" class="form-control" id="login_userName" placeholder="用户名">
</td>
</tr>
<tr>
<td><label for="login_password">密 码</label></td>
<td><input type="password" class="form-control" id="login_password" placeholder="密 码">
</td>
</tr>
<tr>
<td><button type="submit" class="btn btn-default" onclick="login()">登录</button></td>
</tr>
</table>
</form>

js

function login(){
var loginInfo = {
"loginname":$("#login_userName").val().trim(),
"password":$("#login_password").val().trim()
}
var timestamp=new Date().getTime();
var url="/pub/frame.html?timestamp="+timestamp;
$.ajax({
url: '/login/login.do',
type: 'post',
dataType: 'json',
contentType:'application/json',
async:false,
data: JSON.stringify(loginInfo),
success: function (data) {
//正常回调
if(data.status==0){
$("#login_userName").val("");
$("#login_password").val("");
window.location.href=url;
}else if(data.status==1) {
alert(data.msg);
}
},
error:function (data) {
alert(data.msg);
}
});
}

解决方案有三种:

第一种:将提交按钮type由submit改为button

第二种:在跳转页面方法也就是window.location.href=url;后加上window.event.returnValue=false;

第三种:在按钮点击事件中写:onclick="login();return false;"

因为使用ajax跳页提交了一次表单,而submit也会自动提交表单,需要阻断submit的提交。

上一篇:linux shell基础语法


下一篇:vue滚动行为控制——页面跳转返回上一个页面保留滚动位置