Form和$.ajax.post重复提交问题解决记录

有问题的登录页面

<form id="submitFrom" method="post" action="login_login">//**注意method和action**
<div class="form-group has-feedback">
<input type="text" name="username" id="username" class="form-control" placeholder="Username">
<span class="glyphicon glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4">
<button id="loginButton" class="btn btn-primary btn-block btn-flat">登录</button>
</div>
</div>
</form>

有问题的js

//登录操作服务器校验
$('#loginButton').click(function(){
var username = $("#username").val();
var password = $("#password").val();
//验证是否为空或长度等操作
if(username == ""){//不贴密码验证空了，排版麻烦。
$("#username").tips({
msg: '用户名不得为空',
side: 2,
bg: '#AE81FF',
time: 2
});
$("#username").focus();
return false;//注意这，应当结束然后什么都不干的。
}else{
$("#username").val(jQuery.trim($('#username').val()));
}

$.ajax({
type:'POST',
url:'<%=basePath%>login_login',
/*data: $('#submitFrom').serialize(),*///这种或下面那种，好像不太一样。由于做测试
data:{"username":username,"password":password},
dataType: 'json',
async:false,
cache:false,
success: function (data) {
//do something
if ("success" == data.msg && data.status == 200) {
window.location.href= "<%=basePath%>main/index";
}else{
//do something
}
},
error:function(data){
//do something
}
});
});

浏览器调试 只填用户名不填密码执行 return false;然后js代码停了，浏览器会默认自动通过form的参数给你发个提交请求，然后返回json下面这样的

{

“success”: false,

“status”: 404,

“msg”: “error”

}

参照：https://segmentfault.com/q/1010000006639384

问题解决：

无问题的页面

<form id="submitFrom">//**只加id**
<div class="form-group has-feedback">
<input type="text" name="username" id="username" class="form-control" placeholder="Username">
<span class="glyphicon glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4">
<button id="loginButton" class="btn btn-primary btn-block btn-flat">登录</button>
</div>
</div>
</form>

无问题的js

//登录操作服务器校验
$('#submitFrom').submit(function(event){//**click改为submit，对象改为form，function加event重点**

event.preventDefault(); // **阻止默认事件重点**
//[http://www.w3school.com.cn/jsref/event_preventdefault.asp](http://www.w3school.com.cn/jsref/event_preventdefault.asp)

var username = $("#username").val();
var password = $("#password").val();
//验证是否为空或长度等操作
if(username == ""){//不贴密码验证空了，排版麻烦。
$("#username").tips({
msg: '用户名不得为空',
side: 2,
bg: '#AE81FF',
time: 2
});
$("#username").focus();
return false;//结束就是结束了。
}else{
$("#username").val(jQuery.trim($('#username').val()));
}

$.ajax({
type:'POST',
url:'<%=basePath%>login_login',
/*data: $('#submitFrom').serialize(),*///这种或下面那种，好像不太一样。由于做测试
data:{"username":username,"password":password},
dataType: 'json',
async:false,//不要异步要同步
cache:false,//不缓存
success: function (data) {
//do something
if ("success" == data.msg && data.status == 200) {
window.location.href= "<%=basePath%>main/index";
}else{
//do something
}
},
error:function(data){
//do something
}
});
});

写在后面：无问题的js 就算通过ajaxpost提交成功由于还没返回结果（回调函数）就已经被Form自动默认又提交一遍了！！返回来就是json 给浏览器解析并不是预期的回调函数。

HTTP405错误是接收的方法要用post你却用了get，什么你没有get 你的确没用。浏览器默认帮你用了！！不信postman 做测试

踩了两三天坑 慢慢排除出错的原因，收获不小。