我觉得很奇怪，没有人提到数据是一个对象。对我来说，这是传递数据最干净、最简单的方式:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo-value',
            'bar': $('#bar').val()
        }
    }).always(function (response) {
        console.log(response);
    });

    return false;
});

然后，在后端:

// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar

简单版(不发送图像)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

复制并粘贴页面上的一个窗体或所有窗体的一个窗体

这是Alfrekjv的答案的修改版本

它将使用jQuery >= 1.3.2 您可以在文档准备好之前运行该命令 您可以删除并重新添加表单，它仍然可以工作 它将发布到与标准表单相同的位置，在 表单的“action”属性

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

我想编辑Alfrekjv的答案，但偏离太多了，所以决定把这个作为一个单独的答案发布。

不发送文件，不支持按钮，例如单击一个按钮(包括提交按钮)将其值作为表单数据发送，但由于这是一个ajax请求，单击按钮将不会被发送。

要支持按钮，您可以捕获实际的按钮点击，而不是提交。

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

在服务器端，你可以用jquery设置HTTP_X_REQUESTED_WITH的报头来检测ajax请求 为php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

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

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

避免发送多个formdata:

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

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

我知道这是一个与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"));