jQuery post () com serialização e dados extras

Estou tentando descobrir se é possível postar serialize()e outros dados que estão fora do formulário.

Aqui está o que eu pensei que iria funcionar, mas ele envia apenas 'wordlist'e não os dados do formulário.

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

Alguém tem alguma idéia?

Você pode usar serializeArray ^[docs] e adicionar os dados adicionais:

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

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

Experimente $ .param

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

Uma solução alternativa, caso você precise fazer isso em um upload de arquivo ajax:

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

OU ainda mais simples.

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

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

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

    return false;

});

Quando você deseja adicionar um objeto javascript aos dados do formulário, pode usar o seguinte código

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(){});

Ou, se você adicionar o método serializeObject () , poderá fazer o seguinte

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

Na nova versão do jquery, poderia fazê-lo através dos seguintes passos:

• obter matriz de parâmetros via serializeArray()
• chamar push()ou métodos semelhantes para adicionar parâmetros adicionais à matriz,
• chamada $.param(arr)para obter a seqüência de caracteres serializada, que pode ser usada como o dataparâmetro de jquery ajax .

Código de exemplo:

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

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

Você pode fazer com que o formulário contenha os dados adicionais como campos ocultos que você definiria imediatamente antes de enviar a solicitação AJAX para os valores correspondentes.

Outra possibilidade consiste em usar esta pequena jóia para serializar seu formulário em um objeto javascript (em vez de string) e adicionar os dados ausentes:

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

Você pode usar isso

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

Eu gosto de manter objetos como objetos e não fazer nenhuma mudança de tipo louca. Aqui está o meu caminho

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!'
      })
    });
  }
});

se você não pode ver de cima, usei a função .concat e passei um objeto com a variável post como 'name' e o valor como 'value'!

Espero que isto ajude.