在使用jQuery和AJAX时，我应该捕获按钮点击事件还是表单提交事件？

Question

假设有一个简单的HTML表单：

        <form id="settings-form">
            <label>
            Input data:
            <input name="data"/>
            </label>
            <button id="submit-btn">Submit</button>
        </form>

我希望使用jQuery和AJAX提交表单，以便页面不会被刷新。以下是至少两种实现方法：

1. 附加事件处理程序到表单的实际提交中：

    $("#settings-form").submit(function(event){
        event.preventDefault();
        var data = $(this).serialize();
        //Ajax code here
    });

在这里，我会将type='submit'添加到按钮submit-btn中。

2. 将事件处理程序附加到按钮：

    $("#submit-btn").click(function(){
        var data = $("#settings-form").serialize(); // or this.closest("form").serialize()
        //Ajax code here
    });

在这里，submit-btn 获取了 type='button'。

我的问题是：哪个选项更好？这不是关于在这种情况下哪个type属性值更好，而是为什么事件处理程序1比2好或反之。

- lennyklb

---

如果您将事件监听器放在表单的实际提交上，当用户在输入框中聚焦时按下“Enter”键时，它也会触发。但在选项2中不是这种情况。 - Koen

@Koen 那是一个很好的观点。我想click()事件监听器方法似乎是在重写submit()而没有覆盖相同的功能。 - lennyklb

好的，如果你选择使用click事件，用户必须实际点击按钮才能使用jQuery提交表单。但是现在有许多其他提交表单的方式。;-) - Koen

可能是<input type='button' />和<input type='submit' />之间的区别的重复问题。 - Jeric Cruz

Answer 1

一个表单可以通过多个来源进行提交，不仅仅是通过点击提交按钮 (例如：手动调用 $("form").submit() 或者按下 Enter)。

使用第一种选项可以确保捕获表单上的所有可能提交方式，而第二种选项只会在点击按钮时阻止提交。由您决定选择哪种方式。

就性能而言，两种方式没有区别。

- Alexandru Severin

---

我明白。我猜当页面有多个表单或AJAX数据处理程序时，点击事件处理程序变得越来越突出？ - lennyklb

@LennartKloppenburg 通常每个表单都应该有自己的提交按钮，如果需要一个按钮来提交多个表单，你不会把它放在任何一个表单中，因此你不需要阻止它的操作。 - Alexandru Severin

@LennartKloppenburg 我还没有遇到过覆盖 onClick() 比覆盖表单的 submit() 更好的实际情况，但我相信更有经验的开发人员知道这样的场景，这就是为什么我没有在我的答案中声明您应该始终覆盖 submit() 的原因。 - Alexandru Severin

Answer 2

type='submit' 用于将 form 数据传递到服务器。

type='button' 用于执行应用程序中的其他命令。如果您希望这样做，它也可以使用 ajax 调用在服务器上发布数据。

因此，一般来说，如果您的页面全部都是关于表单（申请表、联系表等），最好使用 type='submit'，而对于其他命令，例如获取地址中的邮政编码，请使用 type='button'。

您还可以参考此文章： <input type='button' /> 和 <input type='submit' /> 的区别

- Jeric Cruz

Answer 3

当您使用提交按钮时，请添加return false以防止提交和重定向到表单操作。

提交始终被认为是更好的选择，因为有以下原因：

1. 提交可以实现预期功能。
2. 跨平台性能。（尝试在不同设备上的不同浏览器中使用它。默认情况下，输入/返回与input type="submit"绑定）

- Saurabh Sharma

---

首先，event.preventDefault(); 应该已经阻止了提交。其次，这不是 OP 所询问的内容。 - Alexandru Severin

你已经改进了你的回答，但是当实际表格不是像这个问题一样被提交时，这些优点如何保持？数据是使用 AJAX 发送的，所以我们不需要 submit() 来做它本身意图的事情，我们只需要一个触发 AJAX 调用的事件。 - lennyklb

@LennartKloppenburg 即使在 AJAX 请求中，您也正在提交表单数据！这与可用性有关。 当您在输入框中添加数据时，即使是 AJAX 调用，按下回车键也会提交数据。您不需要故意点击提交按钮来完成此操作。 - Saurabh Sharma

当使用event.preventDefault时，实际上是阻止了submit()本身，因此您可以覆盖数据提交的方式。您对可用性的看法是正确的，但有时表单只能通过点击按钮直观地提交。我想这取决于具体情况。 - lennyklb

这确实与可用性有关。我不喜欢在填写表单后再按按钮。回车键可以完成工作，它就是为此而设计的。 应用程序意识到表单。在手机键盘上检查带有提交按钮和没有提交按钮的表单！ - Saurabh Sharma