带有序列化和额外数据的 jQuery post()答案

【问题标题】：jQuery post() with serialize and extra data带有序列化和额外数据的 jQuery post()
【发布时间】：2011-10-01 11:01:21
【问题描述】：

我正在尝试找出是否可以发布serialize() 和表单之外的其他数据。

这是我认为可行的方法，但它只发送 'wordlist' 而不是表单数据。

$.post("page.php",( $('#myForm').serialize(), { 'wordlist': wordlist }));

有人有什么想法吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用serializeArray ^[docs] 并添加其他数据：

var data = $('#myForm').serializeArray();
data.push({name: 'wordlist', value: wordlist});

$.post("page.php", data);

【讨论】：

嗯。我想我比我的解决方案更喜欢这个 :) 我将来可能会开始这样做。
@Gudradain：它工作得很好：jsfiddle.net/fnjncqhv。如果它对您不起作用，那么您将面临另一个问题。
不，它没有。 jsfiddle.net/fnjncqhv/1 serializeArray() 生成一个对象数组，每个对象包含一个属性，如果您的数据对象包含多个属性（如您的示例中），它将生成一个无效对象并且不会在服务器端绑定。请编辑您的答案以解决问题。
@Gudradain：请参阅我对您的回答的评论。你错了。 serializeArray 不会产生您认为的结构。我不确定你想用你的演示展示什么。您只是在提醒数组的长度。如果我的demo 不能说服你，请查看documentation。
@FelixKling 对那个失败的时刻感到抱歉，感谢您的解释。没有意识到对于要添加的每个参数，您确实需要格式 {name: 'your-paramater-name', value : 'your-parameter-value'}。

【解决方案2】：

试试$.param

$.post("page.php",( $('#myForm').serialize()+'&'+$.param({ 'wordlist': wordlist })));

【讨论】：

【解决方案3】：

另一种解决方案，以防您需要在上传 ajax 文件时执行此操作：

var data = new FormData( $('#form')[0] ).append( 'name' , value );

或者更简单。

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

    e.preventDefault();
    var data = new FormData( this ).append('name', value );

    // ... your ajax code here ...

    return false;

});

【讨论】：

【解决方案4】：

当你想在表单数据中添加一个javascript对象时，可以使用下面的代码

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeArray();
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        postData.push({name:key, value:data[key]});
    }
}
$.post(url, postData, function(){});

或者如果你添加方法serializeObject()，你可以这样做

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeObject();
$.extend(postData, data);
$.post(url, postData, function(){});

【讨论】：

这基本上会生成一个看起来像[{name: 'wordlist'}, {value: wordlist}] 的数组。这不是 jQuery 理解的格式，所以我怀疑这是否真的有效。
@FelixKling serializeArray() 产生 [{name1: 'value1'}, {name2: 'value2'}]。如果你有一个对象 data { name3 : 'value3', name4: 'value4' } 并将它从 serializeArray() 推入数组，你会得到 [{name1: 'value1'}, {name2: 'value2'}, { name3:'value3', name4:'value4'}]。数组中的最后一个对象无效，您不会得到结果。
"serializeArray() 产生 [{name1: 'value1'}, {name2: 'value2'}]。" 不，它不会：jsfiddle.net/akyz1Lcy

【解决方案5】：

在新版本的jquery中，可以通过以下步骤完成：

通过serializeArray()获取参数数组
调用push() 或类似方法为数组添加额外的参数，
调用$.param(arr)获取序列化字符串，可以作为jquery ajax的data参数。

示例代码：

var paramArr = $("#loginForm").serializeArray();
paramArr.push( {name:'size', value:7} );
$.post("rest/account/login", $.param(paramArr), function(result) {
    // ...
}

【讨论】：

【解决方案6】：

$.ajax({    
    type: 'POST',  
    url: 'test.php',  
    data:$("#Test-form").serialize(),  
    dataType:'json',
     beforeSend:function(xhr, settings){
     settings.data += '&moreinfo=MoreData';
     },
    success:function(data){
            //  json response  
    },
    error: function(data) { 
        // if error occured
    }
    });

【讨论】：

【解决方案7】：

你可以用这个

var data = $("#myForm").serialize();
data += '&moreinfo='+JSON.stringify(wordlist);

【讨论】：

【解决方案8】：

您可以让表单包含附加数据作为隐藏字段，您可以在将 AJAX 请求发送到相应值之前设置这些数据。

另一种可能性是使用this little gem 将表单序列化为 javascript 对象（而不是字符串）并添加缺失的数据：

var data = $('#myForm').serializeObject();
// now add some additional stuff
data['wordlist'] = wordlist;
$.post('/page.php', data);

【讨论】：

没有名为serializeObject 的现有函数。你从哪里得到的？

【解决方案9】：

我喜欢将对象保留为对象，而不是进行任何疯狂的类型转换。这是我的方式

var post_vars = $('#my-form').serializeArray();
$.ajax({
  url: '//site.com/script.php',
  method: 'POST',
  data: post_vars,
  complete: function() {
    $.ajax({
      url: '//site.com/script2.php',
      method: 'POST',
      data: post_vars.concat({
        name: 'EXTRA_VAR',
        value: 'WOW THIS WORKS!'
      })
    });
  }
});

如果你从上面看不到，我使用了 .concat 函数并传入了一个对象，其中 post 变量为“名称”，值为“值”！

希望这会有所帮助。

【讨论】：