我知道这是一个与jQuery相关的问题，但现在使用JS ES6的事情要容易得多。由于没有纯javascript的答案，我想我可以添加一个简单的纯javascript解决方案，这在我看来是更干净的，通过使用fetch() API。这是实现网络请求的一种现代方式。在您的例子中，由于已经有了表单元素，我们可以简单地使用它来构建我们的请求。

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

如果你使用form.serialize() -你需要给每个表单元素一个这样的名字:

<input id="firstName" name="firstName" ...

表单像这样被序列化:

firstName=Chris&lastName=Halcrow ...

我得到了以下信息:

formSubmit('#login-form', '/api/user/login', '/members/');

在哪里

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

这假设post到'url'返回一个ajax形式的{success: false, error:'my error to display'}

你可以随意改变。请随意使用该片段。

避免发送多个formdata:

在表单再次提交之前，不要忘记解绑定submit事件， 用户可以调用sumbit函数不止一次，也许他忘记了一些东西，或者是一个验证错误。

 $("#idForm").unbind().submit( function(e) {
  ....

这段代码甚至可以使用文件输入

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

有几件事你需要记住。

1. 有几种提交表单的方法

使用提交按钮 按enter键 通过在JavaScript中触发提交事件 可能更多取决于设备或未来的设备。

因此，我们应该绑定到表单提交事件，而不是按钮单击事件。这将确保我们的代码在现在和未来的所有设备和辅助技术上都能工作。

2. Hijax

用户可能没有启用JavaScript。hijax模式在这里很好，我们使用JavaScript温和地控制表单，但如果JavaScript失败，则保持表单可提交。

我们应该从表单中提取URL和方法，因此如果HTML发生了变化，我们不需要更新JavaScript。

3.低调的JavaScript

使用event. preventdefault()而不是return false是很好的实践，因为它允许事件冒泡。这使得其他脚本可以绑定到事件中，例如可以监视用户交互的分析脚本。

速度

理想情况下，我们应该使用外部脚本，而不是内联插入脚本。我们可以使用脚本标记在页面的头部部分链接到它，或者在页面的底部链接到它，以提高速度。脚本应该悄悄地增强用户体验，而不是妨碍用户体验。

Code

假设你同意上面的所有建议，并且你想要捕获提交事件，并通过AJAX (hijax模式)处理它，你可以这样做:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

你可以手动触发表单提交，只要你喜欢通过JavaScript使用类似的东西:

$(function() {
  $('form.my_form').trigger('submit');
});

编辑:

我最近不得不这样做，最后写了一个插件。

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

添加一个data-autosubmit属性到你的表单标签，然后你可以这样做:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});