使用AJAX输入类型= " submit "而不是输入类型= " button " ?

I have an AJAX form I'm setting up, using an <input type="button"> with a jQuery .click action being set.

我设置了一个AJAX表单，使用了一个，并设置了jQuery .click操作。

The problem is, because there is no <input type="submit"> in the form, the form doesn't submit in a traditional way, so form validators don't always work, and pressing the enter button does nothing.

问题是，因为表单中没有，所以表单不会以传统的方式提交，所以表单验证器并不总是工作的，按下enter按钮也不会。

If I DO add a submit input, when it's clicked (or enter is hit, etc.), the page reloads as if it is not an AJAX form.

如果我添加了一个提交输入，当它被单击(或者输入被点击，等等)时，页面会重新加载，就好像它不是一个AJAX表单一样。

What am I missing here?

我错过了什么?

2 个解决方案

#1

Use a submit button. The submit button will be more compatible in terms of default browser behavior, such as pressing enter. Then, on the submit event, just cancel the form submission and run your AJAX code.

使用一个提交按钮。提交按钮将在默认浏览器行为方面更加兼容，例如按下enter。然后，在提交事件上，只需取消表单提交并运行AJAX代码。

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

If you're using jQuery, you can use a more "clean" method

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

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

#2

Rather change form's submit behaviour and keep your <input type="submit"> button as well:

而是改变表单的提交行为，并保持您的按钮:

$("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
        }
    });
});

Advantage: The good thing is this will work in all cases when you hit ENTER on any of the form's input elements or click the submit button. It will always work without exception.

优点:在所有情况下，当您点击表单的任何输入元素或单击submit按钮时，都可以使用这个功能。它将毫无例外地工作。

#1