在 jQuery Ajax 函数中将整个表单作为数据传递

Question

我有一个 jQuery ajax 函数，想提交整个表单作为发布数据。我们不断更新表单，因此不断更新应在请求中发送的表单输入变得乏味。

Answer 1

有一个函数可以做到这一点：

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

Answer 2

serialize() 如果您想使用 post 方法发送表单，这不是一个好主意。例如，如果你想通过 ajax 传递一个文件，它就不会工作。

假设我们有一个带有这个 id 的表单：“myform”。

更好的解决方案是制作一个 FormData 并发送它：

    let myform = document.getElementById("myform");
    let fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

Answer 3

一般在表单元素上使用serialize()。

请注意，多个 选项在同一个键下序列化，例如

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

将产生一个查询字符串，其中包含多次出现的相同查询参数：

[path]?foo=1&foo=2&foo=3&someotherparams...

这可能不是你想要的后端。

我使用此 JS 代码将多个参数减少为一个逗号分隔的单个键（无耻地从 John Resig 的帖子中的评论者的回复中复制）：

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

把上面的变成：

[path]?foo=1,2,3&someotherparams...

在您的 JS 代码中，您可以这样称呼它：

var inputs = compress($("#your-form").serialize());

希望对您有所帮助。

Answer 4

使用

serialize( )

var str = $("form").serialize();

将表单序列化为查询字符串，可以在 Ajax 请求中发送到服务器。

Answer 5

一个很好的jQuery选项是通过FormData。此方法也适用于通过表单发送文件时！

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

您在 jQuery 中的发送函数如下所示：

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

要向表单添加数据，您可以在表单中使用隐藏输入，也可以即时添加：

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

Answer 6

您只需发布数据。和使用 jquery ajax 函数设置参数。这是一个例子。

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Answer 7

其他解决方案对我不起作用。也许我正在处理的项目中的旧 DOCTYPE 阻止了 HTML5 选项。

我的解决方案：

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}