web-dev-qa-db-fra.com

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

Bon, j'essaie donc 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 n'envoie que "liste de mots" et non les données de formulaire.

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

Quelqu'un a des idées?

javascriptjquery
131
Vitaliy Isikov

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

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

$.post("page.php", data);
300
Felix Kling

Essayez $ .param

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

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;

});
8
r3wt
$.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
    }
    });
4
Ganesan Murugesan

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 effectuer les opérations suivantes:

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

Dans la nouvelle version de jquery, vous pouvez le faire en suivant les étapes suivantes:

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

Exemple de code: 

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

Le formulaire peut contenir les données supplémentaires sous forme de champs masqués que vous définissez avant d'envoyer la demande AJAX aux valeurs correspondantes.

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

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

Vous pouvez utiliser ceci

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

J'aime garder les objets en tant qu'objets et ne pas faire de changement de type insensé. Voici mon chemin

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é dans un objet avec la variable post comme "nom" et la valeur comme "valeur"!

J'espère que cela t'aides.

0
A A Karim