简单版(不发送图像)

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

你可以像下面这样在提交函数上使用这个。

HTML表单

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

jQuery功能:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

详情及样品请访问: http://www.spiderscode.com/simple-ajax-contact-form/

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

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

表单像这样被序列化:

firstName=Chris&lastName=Halcrow ...

考虑使用最接近的

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

Try

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) { fetch(form.action,{method:'post', body: new FormData(form)}); console.log('We submit form asynchronously (AJAX)'); e.preventDefault(); } <form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm"> <input hidden name="csrfToken" value="$0meh@$h"> <input name="email" value="aa@bb.com"> <input name="phone" value="123-456-666"> <input type="submit"> </form> Look on Chrome Console > Network after/before 'submit'

你可以使用Ajax Form Plugin或jQuery serialize函数中的ajaxForm/ajaxSubmit函数。

AjaxForm：

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

当按下提交按钮时，ajaxForm将发送。ajaxSubmit立即发送。

序列化:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

AJAX序列化文档在这里。