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属性值在这种情况下对button更好，而是为什么事件处理程序1优于2，反之亦然。

Answer 1

表单可以由多个来源提交，不仅可以通过单击提交按钮（例如：手动调用$("form").submit()或按Enter）。

使用第一个选项可确保您捕获该表单上的所有可能提交，而第二个选项仅在单击按钮时阻止提交。由您来决定您需要哪一个。

在表现方面没有区别。

Answer 2

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

type='button'用于在您的应用程序中执行其他命令。虽然如果你愿意，也可以使用ajax调用在服务器中发布数据。

所以一般情况下，如果您的页面全部是关于表单（申请表，联系表单等），请更好地使用type='submit'以及其他命令，例如获取{{1}中地址的邮政编码使用form

你也可以参考这篇文章：Difference between <input type='button' /> and <input type='submit' />

Answer 3

使用提交按钮时添加env以阻止提交和重定向以形成操作。

由于以下原因，提交始终被视为更好：

提交完成目标。
跨平台性能。（尝试在不同设备上的不同浏览器上使用它。默认输入/ return与return false绑定）

使用jQuery和AJAX时，我应该抓住按钮点击或表单提交吗？

3 个答案: