禁止表单提交的N种方式

对于表单页面，很多时候的开发场景都是异步的提交表单的，对于异步提交表单的一个条件就是禁止页面的表单提交，也就是禁止传统的条件方式。

看一下代码：

<form action="api.php" method="post">
o<input type="text" name="data" />
o<input type="submit" value="提交"/>
</form>

上面就是一个传统的表单提交方式，点击提交把数据以post方式提交给api.php。

那么异步提交就要通过ajax提交，我们在点击提交按钮的时候不再在页面直接提交给api.php而是交给js的ajax。

如何禁止表单这种传统的默认提交方式呢？

1.在action属性中设置javasript:void()值

<form action="javascript:void(0);" method="post">
o<input type="text" name="data" />
o<input type="submit" value="提交"/>
</form>

2.在onsubmit事件做return false上处理

<form onsubmit="return false;" method="post">
o<input type="text" name="data" />
o<input type="submit" value="提交"/>
</form>

3.直接button标签替代input submit类型标签

<form action="" method="post">
o<input type="text" name="data" />
o<button id="submit" />提交<button>
</form>

4.使用jq的submit事件直接终止

$('form').submit(function(){
    return false;
})

以上4种方式是我经常使用的禁用表单提交的4种方式，其他更多的方式欢迎大家在评论区补充。