关于form表单下点击button的自动提交问题

今天刚好一个java开发的同事在做一个后台管理系统，前端代码也是他自己再写，然后他发现自己写的表单，点击的时候，总是会提交两次，百思不得其解，就过来问我。看了他的代码，就想起来了form表单下的点击button的自动提交的表单的问题，刚好写篇文章吧，其实很简单，O(∩_∩)O哈哈~。

先看下同事的代码：

//html片段
<form action='xxxx/xxx/upload' method='post' enctype='multipart/form-data'>
    <label>城市:</label><input class='city-input' type='text' name='city'>
    <label>banner:</label><input type='file' name='banner'>
    <button onclick='formSubmit()'>提交</button>
</form>
//js片段

function formSubmit(){
    $.ajaxFileUpload({
        url: 'xxxx/xxx/upload',
        type: 'post',
        data : {
            city: $('.city-input').val()
        },
        secureuri: false, //一般设置为false
        fileElementId: 'banner', // 上传文件的id、name属性名
        dataType: 'JSON', //返回值类型，一般设置为json、application/json  这里要用大写  不然会取不到返回的数据
        success: function(data, status){  
            alert(data);
        },
        error: function(data, status, e){
            alert(e);
        }
    })
}

提交表单

当用户点击提交按钮或图像按钮时，就会提交表单。

<!--通用提交按钮-->
<input type='submit' value='Submit Form'>

<!--自定义提交按钮-->
<button type='submit'>提交</button>

<!--图像按钮-->
<input type='image' src='submit.png'>

上面那段代码中，之所以出现表单提交了两次，是因为：button的type在Internet Explorer 下的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

因此：
请始终为按钮规定 type 属性

上述代码中，只需要添加button 的 type属性为 button，即可避免两次提交ajax，只执行formSubmit方法中的操作。
同时，也可以通过下面的方式，阻止表单的默认事件，

<form onsubmit='return false'>

</form>