Accueil du site > Jquery > Transmettre des tableaux (array) dans les requetes ajax

Transmettre des tableaux (array) dans les requetes ajax

dimanche 27 décembre 2009, par fabrizio

Lors d’une énième lecture de la documentation de jquery je suis tombé sur une petite perle qui va certainement faire la joie des développeurs. Si vous êtes un habitué de jquery et de l’ajax il vous est arrivé certainement , mille fois , si ce n’est plus , d’avoir à envoyer un ensemble de données vers votre serveur.

Si une , deux ou trois variables sont envoyés, cela se fait vraiment de manière très simple. Mais si vous devez passer un ensemble de données cela peut se révéler tout de suite beaucoup plus compliqué. Généralement la solution adoptée est soit d’échanger les données sous un format plus adapté ( par exemple du xml ou du json ) , soit se créer soit même une syntaxe qui sera interpréter par un script côté serveur.

Il existe une autre possibilité que je ne connaissais pas et que je m’empresse de vous faire partager via un petit exemple.

function send_array(){
        arrayCheckBox = new Array;
         $("input:checked").each(function() {
          arrayCheckBox.push(this.value);
        });
        req = { 'tab[]' : arrayCheckBox , type : 'demo'};
        $.ajax({
                   type: "POST",
                   url: "file.php",
                   data: req ,
                   success: function(x){
                     $('#resultat').html(x);
                   }
                 });
}
Télécharger

Cette fonction en javascript est assez simple. Je parcours un ensemble de case à cocher en stockant les éléments sélectionnés dans le tableau arrayCheckBox . Ensuite je construit un objet javascript , req , que je vais passer dans ma requete de type POST. C’est là ou il y a cette notation que je connaissais pas et qui fait des miracles ==> ’tab[]’ : arrayCheckBox !!!

Lors de l’envoie de ces éléments les éléments du tableau vont être considéré comme un tableau à l’intérieur du tableau $_POST. Le fichier file.php appelé par cette requête ajax se contente de renvoyer un print_r de $_POST. Et en cas de succès la réponse est inscrite dans l’élément DOM ayant l’id resulsat.

Et voici le résultat ...

Je trouve cela super pratique car cela offre un format supplémentaire pour l’envoi de données. Format d’autant plus intéressant que $_POST est un tableau php qui peux s’exploiter sans aucun traitement particulier ( à la différence du xml qui doit être parser ).

J’espère que cela vous aura appris quelque chose d’intéressant et comme d’habitude vous pouvez télécharger la démo.

Merci de votre lecture et de votre visite.

Documents joints

4 Messages de forum

  • Transmettre des tableaux (array) dans les requetes ajax 24 février 2010 15:32, par Geo

    Merci, cet article m’a bien aidé, par contre j’avais essayé au début de l’adapter à la fonction .post et je n’ai pas eu le même résultat, est ce incompatible, oui ai je juste des moufles ?

    Répondre à ce message

    • Transmettre des tableaux (array) dans les requetes ajax 26 février 2010 18:04, par fabrizio

      Merci bien pour ton commentaire. Ce code peut être adapter pour jquery.post de la manière suivante :

      a la place de :

      $.ajax({  type: "POST",   url: "file.php",    data: req ,    success: function(x){     $('#resultat').html(x);  }   });

      tu peux ecrire

      jQuery.post( "file.php", req,  function(x){  $('#resultat').html(x); } )

      En te souhaitant une excellente journée !!!

      Répondre à ce message

    • Transmettre des tableaux (array) dans les requetes ajax 2 avril 2011 16:27, par de passage

      il existe la fonction serialize() de jquery qui fait ca tout seul

      $(’#monForm’).serialize() ;

      $.post(url : ’myurl’, data : $(’#monForm’).serialize(), function()...

      A la réception en php, il suffit après de boucler sur $POST[’data’] $data = $POST[’data’][ ; $data[’inputname’] = ’valeur’ ; $data[’checkboxname’] = ’valeur’ ; $data[’textareaname’] = ’valeur’ ;

      etc ...

      @+++

      Répondre à ce message

  • Transmettre des tableaux (array) dans les requetes ajax 4 juillet 2011 17:25, par Almilagro

    J’ai un petit soucis avec ajax, en faite je veux envoyer un tableau associatif qui comporte les checkbox de mon formulaire mais ça marche pas avec cette méthode !!! mon code et du genre :

    function addItem() var items = new Array() ; $("input:checked").each(function() var arrayCheckBox = new Array() ; arrayCheckBox["codeItem"] = this.id ; arrayCheckBox["nameItem"] = this.name ; items.push(arrayCheckBox) ; ) ;

    req = ’entities[]’ : items  ; $.ajax( type : "POST",

    url : "/ajax/addItem",

    data : req ,

    success : function(results) var Item = $(results) ; $("#current").prepend(Item) ; ) ; return false ;

    Répondre à ce message

Laisser un commentaire