jQuery post () avec sérialisation et données supplémentaires

J'essaie de savoir s'il est possible de publier serialize()et d'autres données en dehors du formulaire.

Voici ce que je pensais fonctionner, mais il envoie uniquement 'wordlist'et non les données du formulaire.

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

Quelqu'un a-t-il une idée?

Vous pouvez utiliser serializeArray ^[docs] et ajouter les données supplémentaires:

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

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

Essayez $ .param

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

Une solution alternative, au cas où vous auriez besoin de le faire sur un téléchargement de fichier ajax:

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

OU encore plus simple.

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

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

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

    return false;

});

Lorsque vous souhaitez ajouter un objet javascript aux données du formulaire, vous pouvez utiliser le code suivant

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 si vous ajoutez la méthode serializeObject () , vous pouvez faire ce qui suit

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

Dans la nouvelle version de jquery, pourrait le faire via les étapes suivantes:

• obtenir un tableau de paramètres via serializeArray()
• appeler push()ou des méthodes similaires pour ajouter des paramètres supplémentaires au tableau,
• appeler $.param(arr)pour obtenir une chaîne sérialisée, qui pourrait être utilisée comme paramètre de jquery ajax data.

Exemple de code:

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

Vous pouvez faire en sorte que le formulaire contienne les données supplémentaires sous forme de champs masqués que vous définiriez juste avant d'envoyer la requête AJAX aux valeurs correspondantes.

Une autre possibilité consiste à utiliser ce petit bijou pour sérialiser votre formulaire en un objet javascript (au lieu de string) et ajouter les données manquantes:

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

Vous pouvez utiliser ceci

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

J'aime garder les objets comme des objets et ne pas faire de changement de type fou. Voici ma façon

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 vous ne pouvez pas voir d'en haut, j'ai utilisé la fonction .concat et passé un objet avec la variable post comme 'nom' et la valeur comme 'valeur'!

J'espère que cela t'aides.