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

时间:2011-07-08 17:10:32

标签: javascript jquery

好的,所以我试图找出是否可以发布序列化()和表格之外的其他数据。

这是我的工作方式,但它只发送'wordlist'而不是表单数据。

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

有人有什么想法吗?

9 个答案:

答案 0 :(得分:304)

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

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

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

答案 1 :(得分:49)

尝试$.param

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

答案 2 :(得分:8)

另一种解决方案,如果您需要在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;

});

答案 3 :(得分: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(){});

答案 4 :(得分:4)

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

答案 5 :(得分:2)

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

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

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

答案 6 :(得分:2)

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

  • 通过serializeArray()
  • 获取param数组
  • 调用push()或类似的方法将其他参数添加到数组中
  • 调用$.param(arr)获取序列化字符串,该字符串可用作jquery ajax的data参数。

示例代码:

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

答案 7 :(得分:1)

您可以使用此

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

答案 8 :(得分: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'值为'值'!

希望这有帮助。