Transmettre un tableau en paramètre (Ajax/Jquery)

Version imprimable

Bonjour tout le monde, je voudrais savoir s'il est possible de passer un tableau en paramètre de $.ajax.
J'ai essayé de le faire comme ceci, mais cela ne fonctionne pas ou il me manque peut être quelque chose dans ma fonction php.

Voici mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function ConfirmMessage(zones) {
    if (confirm("Etes-vous sûr de vouloir sauvegarder les modifications ?")) {
         var tab = new Array(); 
	for(var i=0;i<zones.length;i++) {
                var name = zones[i];
                var nom = "zone"+name;
    	       var top = document.getElementById(nom).style.top;
    	       var left = document.getElementById(nom).style.left;
    	       var width = document.getElementById(nom).style.width;
    	       var height = document.getElementById(nom).style.height;
 
                tab[i] = new Array();
                tab[i]['nom'] = nom;
                tab[i]['top'] = top;
                tab[i]['left'] = left;
                tab[i]['width'] = width;
                tab[i]['height'] = height; 
 
                jQuery.ajax({
                    type: "POST",
                    url: "update_product_sheet",
                    data: { tab: tab }
                }).done(function( msg ) {
                    alert( "Data Saved: " + msg );
                });           	
    }
}

et mon code php :

Code:

1
2
3
4
function custom_function(){
    $tab = $_POST['tab'];
 
}

22/05/2012, 16h46
SpaceFrog

essaye

Code:

data: { "tab": tab }
22/05/2012, 16h50
Bovino

Non. Tu ne peux pas.
AJAX transmet des informations via le protocole HTTP qui ne reconnait pas les types.
Seules des données textuelles peuvent transiter via AJAX.
22/05/2012, 16h55
SpaceFrog

Code:

data: { "tab": tab.serialisze() }
22/05/2012, 16h55
maxwel56

du coup l'alternative c'est d'appeler plusieurs fois la méthode ajax?
22/05/2012, 17h02
SpaceFrog

Non
et je raconte n'importe quoi avec le serialize () :roll:
regarde plutot du cote du json ...
22/05/2012, 17h22
maxwel56

comment en javascript on peut convertir un tableau en json?
22/05/2012, 17h25
SpaceFrog

jette un oeil sur JSON.stringify()

comme ceci?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ConfirmMessage(zones) {
 
    if (confirm("Etes-vous sûr de vouloir sauvegarder les modifications ?")) {
 
            var arrZones = new Array();
 
    		for(var i=0;i<zones.length;i++) {
                var name = zones[i];
    			var nom = "zone"+name;
    			var top = document.getElementById(nom).style.top;
    			var left = document.getElementById(nom).style.left;
    			var width = document.getElementById(nom).style.width;
    			var height = document.getElementById(nom).style.height;
 
                var array = new Array(nom, top, left, width, height); 
                arrZones[i] = new Array();
                arrZones[i] = array;
 
            }
 
            var jsonStr = JSON.stringify(arrZones); 	
    }
}

J'ai tenté ça mais ça ne fonctionne pas

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arrZones = new Array();      
    		for(var i=0;i<zones.length;i++) {
                var name = zones[i];
    		var nom = "zone"+name;
 
                arrZones[i] = new Array();
                arrZones[i]['name'] = "zone"+name;
                arrZones[i]['top'] = document.getElementById(nom).style.top;
                arrZones[i]['left'] = document.getElementById(nom).style.left;
                arrZones[i]['width'] = document.getElementById(nom).style.width;
                arrZones[i]['height'] = document.getElementById(nom).style.height;
            }
 
            var jsonStr = JSON.stringify(arrZones);

voici mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
function ConfirmMessage(zones) {
    if (confirm("Etes-vous sûr de vouloir sauvegarder les modifications ?")) {
 
            var jsonObjects = [];
            var name;
            var nom;
            var top;
            var left;
            var width;
            var height;
 
            for (var i = 0; i < zones.length; i++) {
 
                name = zones[i];
                nom = "zone"+name;
                top = document.getElementById(nom).style.top;
                left = document.getElementById(nom).style.left;
                width = document.getElementById(nom).style.width;
                height = document.getElementById(nom).style.height;
 
                var jsonObj1 = {};
                jsonObj1.name = nom;
                jsonObj1.top = top;
                jsonObj1.left = left;
                jsonObj1.width = width;
                jsonObj1.height = height;
 
                jsonObjects.push(jsonObj1);
 
            }
            var data = JSON.stringify(jsonObjects);
 
            jQuery.ajax({
                    type: "POST",
                    url: "update_product_sheet",
                    data: data,
                    dataType: "json",
                    success: function (msg) {
                    if (msg.error === 'OK') {
                        alert('SUCCESS')
                    } 
                    else {
                        alert('ERROR' + msg.error)
                    }
            }
 
                }).done(function(msg) {
                    alert( "Data Saved: " + msg );
                });
 
    }
}

et j'ai cette erreur sur firebug : JSON.parse: unexpected character

23/05/2012, 08h39
SpaceFrog

Une première remarque concernant le choix des noms de tes variables ...
Utiliser des noms comme name height etc, c'est chercher les ennuis

Utilise plutôt des nom comme myname voir $name afin que js ne s’emmêle pas les crayons entre des noms de variables et des propriétés !

Ensuite :
Tu as

Code:

dataType: "json",

Que te retourne la page de traitement ?
23/05/2012, 08h57
maxwel56

J'ai pris en compte ta remarque concernant les noms de propriétés. Je me demande si cela ne vient pas d'un problème avec les caractères spéciaux.
Quand je regarde ce que j'ai en post sur firebug cela s'affiche correctement :

Code:

[{"nom":"zoneTitre","haut":"10px","gauche":"3px","largeur":"376px","hauteur":"56px"},{"nom":"zoneDescription","haut":"67px","gauche":"4px","largeur":"200px","hauteur":"261px"},{"nom":"zoneAutres","haut":"334px","gauche":"4px","largeur":"376px","hauteur":"50px"},{"nom":"zoneImage2","haut":"67px","gauche":"206px","largeur":"","hauteur":"261px"},{"nom":"zoneSuggestion","haut":"353px","gauche":"398px","largeur":"","hauteur":"32px"},{"nom":"zoneBouton","haut":"11px","gauche":"546px","largeur":"18px","hauteur":"18px"},{"nom":"zoneCaracTechnique","haut":"109px","gauche":"375px","largeur":"178px","hauteur":"134px"},{"nom":"zoneplusProduits","haut":"0px","gauche":"373px","largeur":"178px","hauteur":"134px"},{"nom":"zoneTarif","haut":"219px","gauche":"376px","largeur":"178px","hauteur":"134px"}]:

En réponse, j'ai null.
23/05/2012, 09h05
SpaceFrog

Dans la console firebug la reponse est null ???
c'est que ta page de traitement ne renvoie rien ...

on peut voir le code de la page de traitement qui retourne la réponse ?

Code:

1
2
3
4
5
6
7
function custom_ajax_function(){
    $json = json_decode($POST['data']);
 
    var_dump($json);
    exit();
...
}

23/05/2012, 09h48
SpaceFrog

Je comprends mieux ...
ce n'est pas un var_dump mais un json_encode qu'il faut faire
ton js n'arrive pas à interpréter le var_dump comme un string json, alors qu'il pourra si tu fais un json_encode

Code:

1 2 3 .done(function(msg) { alert( "Data Saved: " + msg ); });
désormais avec cette partie de js :
j'ai ce message dans une alert
data saved : null

23/05/2012, 10h15
SpaceFrog

c'est quoi ce done ?
tu peux pas tout mettre dans le Success ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
jQuery.ajax({
                    type: "POST",
                    url: "update_product_sheet",
                    data: data,
                    dataType: "json",
                    success: function(data, textStatus, jqXHR) {
                        alert("sucess : "+data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert("error : "+jqXHR);
                    }
 
                });

il m'affiche sucess : null

23/05/2012, 10h35
SpaceFrog

c'est que ton serveur ne renvoit rien
la page coté serveur doit planter
regarde dans la console firebug
tu ne fais bein qu'un

Code:

echo json_encode($json);

cote serveur ?

je fais ça coté serveur

Code:

1
2
3
4
5
6
function custom_ajax_function(){
    $json = $POST['data'];
 
 
    echo json_encode($json);
}

Code:

1 2 3 4 function custom_ajax_function(){ $json = json_decode($POST['data']); echo json_encode($json); }
pour faire un json encode il faut un array ...

23/05/2012, 13h26
maxwel56

cela m'affiche toujours null
23/05/2012, 13h35
SpaceFrog

et si tu mets ça tu as quoi dans la console ?

Code:

echo nl2br(print_r($_POST,true));
23/05/2012, 13h57
maxwel56

cela m'affiche Array
(
)
23/05/2012, 14h00
SpaceFrog

Ta page ne reçoit pas les données ...
23/05/2012, 16h18
maxwel56

d'ou cela peut venir?
23/05/2012, 16h24
SpaceFrog

Dans la console firebug, vois tu le post ?
23/05/2012, 17h15
maxwel56

Code:

[{"nom":"zoneTitre","haut":"10px","gauche":"3px","largeur":"376px","hauteur":"56px"},{"nom":"zoneDescription","haut":"67px","gauche":"4px","largeur":"200px","hauteur":"261px"},{"nom":"zoneAutres","haut":"334px","gauche":"4px","largeur":"376px","hauteur":"50px"},{"nom":"zoneImage2","haut":"67px","gauche":"206px","largeur":"","hauteur":"261px"},{"nom":"zoneSuggestion","haut":"353px","gauche":"398px","largeur":"","hauteur":"32px"},{"nom":"zoneBouton","haut":"11px","gauche":"546px","largeur":"18px","hauteur":"18px"},{"nom":"zoneCaracTechnique","haut":"109px","gauche":"375px","largeur":"178px","hauteur":"134px"},{"nom":"zoneplusProduits","haut":"0px","gauche":"373px","largeur":"178px","hauteur":"134px"},{"nom":"zoneTarif","haut":"219px","gauche":"376px","largeur":"178px","hauteur":"134px"}]
23/05/2012, 17h22
SpaceFrog
et ça c'est à l'envoi...

et si tu fais un var_dump
Code:

1 2 3 $json = json_decode($POST['data']); var_dump($json);
24/06/2015, 13h08
Esther92

Réponse

Salut,

J'ai suivi votre post pour réaliser le même traitement sur un projet que je réalise actuellement. Et avec un peu plus de recherches sur internet, j'ai trouvé la solution.
Je vois que le post est un peu vieux, mais je vais quand même poster la solution pour ceux qui pourront en avoir besoin dans le futur.

Là voici :
J'ai suivi le code du 22/05/2012 de maxwel56 à 22h49.
A la ligne 32, au lieu du "var data = JSON.stringify(jsonObjects);" j'ai plutôt utilisé ce code : var data= { recup : jsonObjects };
La fonction : jQuery.ajax({...}); reste intact.

A la fin je récupère mon tableau en php avec $_POST['recup']. Avec un var_dump($_POST['recup']) je vérifie que j'ai bien toutes les données du tableau.

Merci à tous. :)