我知道这是一个 jQuery 相关问题，但现在使用JSES6的日子要容易得多。因为没有纯净的水 javascript 回答，我想我可以加一个简单的纯 javascript 我认为，通过使用 fetch() 应用程序编程接口。这是一种实现网络请求的现代方法。在您的情况下，因为您已经有一个表单元素，所以我们可以简单地使用它来构建我们的请求。

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_id”）.submit（）这样触发。如果表单已经用html很好地表示了，那么就应该使用这种方法。您只需阅读页面中的内容，用stuff填充表单输入，然后调用.submit（）。它将使用表单声明中定义的方法和操作，因此您无需将其复制到javascript中。
例子

没人提到这件事，我感到很惊讶 data 作为一个对象。对我来说，这是传递数据最干净、最简单的方法：

$('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

javascript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');

   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});

}(jQuery));

html

<ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

这不是op问题的答案，
但如果不能使用静态表单dom，也可以这样尝试。

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

如果使用的是form.serialize（）-则需要为每个表单元素指定如下名称：

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

表单被序列化如下：

firstName=Chris&lastName=Halcrow ...

要避免多次发送formdata，请执行以下操作：
不要忘记取消绑定提交事件，在再次提交表单之前，用户可以多次调用sumbit函数，可能是他忘记了什么，或者是验证错误。

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

您可以使用下面的提交功能。
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/

考虑使用 closest ```
$('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();
});

尝试

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表单插件中的ajaxform/ajaxsubmit函数或jquery序列化函数。
ajaxform：

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

或

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

当按下提交按钮时，ajaxform将发送。ajaxsubmit立即发送。
序列化：

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

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

这里有ajax序列化文档。

jQueryAjax提交表单，就是在单击按钮时使用表单id提交表单
请遵循以下步骤
步骤1-表单标签必须有一个id字段

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

要单击的按钮

<button>Save</button>

步骤2-提交事件在jquery中，它有助于提交表单。在下面的代码中，我们准备从html元素名发出json请求。

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

现场演示请点击下面的链接
如何使用jquery ajax提交表单？

我得到了以下信息：

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

这假设发送到“url”的帖子以 {success: false, error:'my Error to display'} 你可以随意改变。请随意使用这个片段。

我非常喜欢superluminary的回答，尤其是他在jquery插件中 Package 解决方案的方式。因此，感谢超光速技术提供了一个非常有用的答案。不过，在我的例子中，我想要一个插件，它允许我在初始化插件时通过选项定义成功和错误事件处理程序。
下面是我的想法：

;(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、success和error事件处理程序，以实现对用户表单提交状态的反馈。这允许按如下方式使用插件：

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

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

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

$(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)
        {

        }
    });        
});