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 做测试

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