jQuery post () con serialización y datos adicionales

Estoy tratando de averiguar si es posible publicar serialize()y otros datos que están fuera del formulario.

Esto es lo que pensé que funcionaría, pero solo envía 'wordlist'y no los datos del formulario.

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

¿Alguien tiene alguna idea?

Puede usar serializeArray ^[docs] y agregar los datos adicionales:

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

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

Prueba $ .param

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

Una solución alternativa, en caso de que necesite hacer esto al cargar un archivo ajax:

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

O incluso más simple.

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

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

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

    return false;

});

Cuando desee agregar un objeto javascript a los datos del formulario, puede usar el siguiente 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(){});

O si agrega el método serializeObject () , puede hacer lo siguiente

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

En la nueva versión de jquery, podría hacerlo a través de los siguientes pasos:

• obtener param array a través de serializeArray()
• llamar push()o métodos similares para agregar parámetros adicionales a la matriz,
• llame $.param(arr)para obtener una cadena serializada, que podría usarse como parámetro de jquery ajax data.

Código de ejemplo:

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

Puede hacer que el formulario contenga los datos adicionales como campos ocultos que establecería justo antes de enviar la solicitud AJAX a los valores correspondientes.

Otra posibilidad consiste en usar esta pequeña joya para serializar su formulario en un objeto javascript (en lugar de una cadena) y agregar los datos que faltan:

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

Puedes usar esto

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

Me gusta mantener los objetos como objetos y no hacer ningún tipo de cambio loco. Aquí esta mi camino

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

¡Si no puede ver desde arriba, utilicé la función .concat y pasé un objeto con la variable de publicación como 'nombre' y el valor como 'valor'!

Espero que esto ayude.