Question

我正在设置一个AJAX表单，使用<input type="button">并设置了jQuery .click操作。

问题是，因为没有<input type="submit"＆gt;在表单中，表单不以传统方式提交，因此表单验证器并不总是有效，按下回车键无效。

如果我添加一个提交输入，当它被点击（或输入命中等）时，页面会重新加载，就好像它不是一个AJAX形式。

我在这里缺少什么？

Answer 1

使用提交按钮。提交按钮在默认浏览器行为方面更兼容，例如按Enter键。然后，在提交事件上，只需取消表单提交并运行您的AJAX代码。

<form onsubmit="return false;">
<!--Blah Blah Blah-->
<input type="submit">
</form>

如果你正在使用jQuery，你可以使用更“干净”的方法

$('#form_id').bind('submit',function(e) {
  e.preventDefault(); //Will prevent the submit...
  //Add additional code here
});

Answer 2

改为改变表单的submit行为并保留<input type="submit">按钮：

$("form").submit(function(e){
    e.preventDefault();
    // do ajax submition
    $.ajax({
        url: "SomeURL",
        type: "POST",
        data: $(this).serializeArray(),
        success: function(data, status, xhr) {
            // do the success stuff
        },
        error: function(xhr, status err) {
            // do the error stuff
        }
    });
});

优势：当您在任何表单的输入元素上点击 ENTER 或单击提交按钮时，这将适用于所有情况。它将永远无例外地工作。

使用AJAX输入type =“submit”而不是input type =“button”？

2 个答案: