javascript - 概述的预防方法的利弊元素从提交其封闭形式

Question

我有一个<button>元素，我希望它的点击触发表单的 AJAX POST。如果我将<button>元素放在表单中，它会以提交表单的默认行为（非 ajax）响应点击。为了防止表单中元素的这种默认行为<button>，我可以执行以下任一操作：

1. 分配type="button"给<button>元素
2. 在事件处理程序中调用 e.preventDefault() click（即使用 jQuery）
3. 将按钮移到表单的外部

每种方法的优缺点是什么？

注意：在互联网上找到了无数的 SO 帖子或材料，它们谈论如何防止<button>元素提交其封闭形式，但没有一个谈论 WHY。这是一个为什么的问题。

Answer 1

使用类似于第二种方法的东西：

$('form').submit(function(e) {
    e.preventDefault();

    // AJAX stuff
});

其他两种方法使表单无法用于没有 JavaScript 的浏览器。不做任何事情的按钮会让用户感到沮丧。