我得到了以下信息:

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'}

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

我真的很喜欢superluminary的这个答案，尤其是他在jQuery插件中包装解决方案的方式。所以感谢superluminary提供了一个非常有用的答案。在我的例子中，我想要一个插件，它允许我在插件初始化时通过选项来定义成功和错误事件处理程序。

这就是我想到的:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

这个插件允许我很容易地在页面上“ajaxify”html表单，并提供onsubmit，成功和错误事件处理程序，用于实现表单提交状态的用户反馈。这使得插件可以这样使用:

 $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

请注意，成功和错误事件处理程序接收到的参数与从jQuery ajax方法的相应事件接收到的参数相同。

简单版(不发送图像)

<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
}

考虑使用最接近的

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

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

有几件事你需要记住。

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