带有序列化和额外数据的jQuery post（）

147

我正在尝试确定是否可以发布serialize()表格之外的其他数据。

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

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

有人有什么想法吗？

javascript jquery

— 维塔利·伊西科夫（Vitaliy Isikov）
source

329

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

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

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

— 费利克斯·克林
source

11

嗯我认为我比解决方案更喜欢它：)我将来可能会开始这样做。

— Michael Mior

@Gudradain：效果很好：jsfiddle.net/fnjncqhv。如果对您不起作用，您将面临另一个问题。

— Felix Kling 2014年

不，不是。jsfiddle.net/fnjncqhv/1 serializeArray（）生成一个对象数组，每个对象包含一个属性，如果您的数据对象包含多个属性（如您的示例），它将生成一个无效对象，并且不会被绑定服务器端。请编辑您的答案以解决问题。

— Gudradain 2014年

2

@古德拉丹：请看我对你的回答的评论。你错了。serializeArray不会产生您认为的结构。我不确定您要在演示中显示什么。您只是在提醒阵列的长度。如果我的演示无法说服您，请查看文档。

— Felix Kling 2014年

1

@FelixKling抱歉，失败了，谢谢您的解释。没意识到您真的需要为每个要添加的参数使用{name：'your-paramater-name'，value：'your-parameter-value'}格式。

— Gudradain 2014年

55

试试$ .param

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

— 迈克尔·迈尔
source

3

这是最好的解决方案！

— Ivijan StefanStipić15年

9

如果您需要在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;

});

— r3wt
source

5

当您要向表单数据添加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(){});

— 古德拉丹
source

1

这基本上将生成一个看起来像的数组[{name: 'wordlist'}, {value: wordlist}]。这不是jQuery可以理解的格式，因此我怀疑这是否有效。

— Felix Kling 2014年

@FelixKling serializeArray（）产生[{name1：'value1'}，{name2：'value2'}]。如果您有一个对象数据{name3：'value3'，name4：'value4'}并将其从serializeArray（）推入数组，则会得到[{name1：'value1'}，{name2：'value2'}，{ name3：'value3'，name4：'value4'}]。数组中的最后一个对象无效，您将不会得到结果。

— Gudradain 2014年

“ serializeArray()生产[{name1: 'value1'}, {name2: 'value2'}]。” 不，不是这样：jsfiddle.net/akyz1Lcy

— Felix Kling

4

在新版本的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) {
    // ...
}

— 埃里克·王
source

3

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

— Ganesan Murugesan
source

2

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

另一种可能性是使用这个小宝石将表格序列化为javascript对象（而不是字符串）并添加缺少的数据：

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

— 达林·迪米特罗夫（Darin Dimitrov）
source

没有名为的现有函数serializeObject。你是在哪里拿到的？

— 杰勒姆（Jerem）造成了

1

你可以用这个

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

— Marouane B.
source

0

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

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变量为'name'，值为'value'！

希望这可以帮助。

— AA卡里姆
source