我真的很喜欢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方法的相应事件接收到的参数相同。

jQuery AJAX提交表单，就是当你点击一个按钮时使用表单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提交表单?

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>

你可以使用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序列化文档在这里。

还有一个提交事件，可以像这样触发$("#form_id").submit()。如果表单已经很好地用HTML表示，则可以使用此方法。您只需读入页面，用东西填充表单输入，然后调用.submit()。它将使用表单声明中定义的方法和动作，因此不需要将其复制到javascript中。

例子

另一个类似的使用form元素上定义的属性的解决方案:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>