使用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属性值更好button,而是为什么事件处理程序1优于2,反之亦然.

Answer 1

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

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

在性能方面没有区别.