[AJAX] Retour d'un json dans Ajax d'une requête Mysql

**laplumedoie** · 09/03/2013, 15h58

Bonjour,

Je développe une solution de caisse virtuelle pour gérer les encaissements dans ma boutique physique (ce n'est donc pas destiné à être publié sur un site Web comme panier).

Le principe est simple : Je scanne un code barre dans le champ EAN, et le script ajax me retourne titre, auteur, éditeur et prix dynamiquement. Tout ça fonctionne correctement de base ainsi que l'ajout au panier, le total etc (j'ai récupéré les scripts ajax et du panier en jquery, mais j'ai fait l'effort de comprendre et de les adapter).

Souhaitant normaliser ce script, je souhaite convertir l'échange de données entre la requête sql et le retour ajax en Json. Là est mon problème, malgré mes recherches, je ne comprends pas comment faire le retour dans le script ajax et l'utiliser pour la gestion du panier. J'ai trouvé des tuto et des exemples, mais je n'ai pas compris les modèles...

Voici la requête sur un fichier php externe :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
 
include('connexion.php');
$connect_db = connect();
 
$return_arr = array();
 
$fetch = mysql_query("SELECT jos_vm_product.product_id,product_name,product_author,product_editor, jos_vm_product_price.product_price FROM jos_vm_product INNER JOIN jos_vm_product_price ON (jos_vm_product.product_id = jos_vm_product_price.product_id)
 WHERE product_EAN = '$_POST[EAN]'");
 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['product_id'] = $row['product_id'];
$row_array['product_name'] = $row['product_name'];
$row_array['product_author'] = $row['product_author'];
$row_array['product_editor'] = $row['product_editor'];
$row_array['product_price'] = $row['product_price'];
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
 
close(); 
?>

Le script Ajax

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var xhr = null;
  // Fonction de creation de l'objet XMLHttpRequest qui resservira pour chaques fonctions AJAX
  function getXhr()
  {
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
  else if(window.ActiveXObject)
  {
  try
  {
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  }
  else
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour");
  xhr = false;
  }
  }
 
  function ajaxEAN()
  {
  getXhr();
  xhr.onreadystatechange = function()
  {
  if(xhr.readyState == 4 && xhr.status == 200)
  {
  // Nous recuperons ce coup ci le retour dans une variable
  var chaine = xhr.responseText.replace(/^\s+/g,'').replace(/\s+$/g,'');
  // Nous decoupons la reponse selon le caractere choisi
 
  var tableau = chaine.split("*");
  // Nous appliquons les valeurs récupérées au element correspondant
  document.getElementById("product_id").value = tableau[0];
  var product_id = document.getElementById("product_id").value;
  document.getElementById("product_name").value = tableau[1];
  var product_name = document.getElementById("product_name").value;
  document.getElementById("product_author").value = tableau[2];
  document.getElementById("product_editor").value = tableau[3];
  document.getElementById("product_price").value = tableau[4];
  var product_price = document.getElementById("product_price").value;
  }
  }
  xhr.open("POST",'ajaxrecupaddr.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  EAN = document.getElementById("EAN").value;
  xhr.send("EAN="+EAN);
 
  }

Ce script est encore calé sur l'ancien modèle ou la requête était renvoyée sous forme de longue chaîne avant d'être découpée selon les différents éléments. Je cherche donc l'équivalence en Json, mais je ne comprends pas les modèles que j'ai trouvé avec JSON.parse, ou $.json .

Et le formulaire de retour :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<form method="post" action="" class="jcart">
<fieldset>
<table>
	<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
	<input type="hidden" name="product_id" id="product_id" />
	<tr>
		<td class="label1">EAN</td>
		<td><input type="text" size="20" name="EAN" id="EAN" onchange="ajaxEAN()"></td>
	</tr>
	<tr>
		<td class="label1">Titre</td>
		<?php echo $product_name; ?>
		<td><input id ="product_name" size="26" name="product_name"/><td>
	</tr>
	<tr>
		<td class="label1">Auteur</td>
		<td><input id ="product_author" size="26" name="product_author"/></td>
	</tr>
	<tr>
		<td class="label1">Editeur</td>
		<td><input id ="product_editor" size="26" name="product_editor"/></td>
	</tr>
	<tr>
		<td class="label1">prix</td>
		<td><input id ="product_price" size="5" name="product_price"/></td>
	</tr>
	<tr>
		<td>
		<label>Qty: <input type="text" name="my-item-qty" value="1" size="3" /></label>
		</td>
		<td>
			<input type="submit" name="my-add-button" value="add to cart" class="button" />
		</td>
	</tr>
</table>
</fieldset>
</form>

**NoSmoking** · 09/03/2013, 17h52

Bonjour,
as tu essayé un mysql_fetch_object plutôt qu'un mysql_fetch_array?

A quoi ressemble ce que tu récupères coté client.

**laplumedoie** · 10/03/2013, 11h13

Les données côté client sont rangées dans un formulaire de consultation. Chaque champ pour une information, ensuite on peut l'ajouter sur le ticket en cours. Mais je suis perdu, car je ne sais pas comment faire la même chose qu'avec la requête de base d'avant.

**NoSmoking** · 10/03/2013, 16h28

montre nous ce à quoi ressemble xhr.responseText, un retour au format jSon ne se traite pas de la même manière qu'un retour au format String.

**laplumedoie** · 10/03/2013, 16h52

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php 
 
include('connexion.php');
$connect_db = connect();
 
$req = mysql_query("SELECT jos_vm_product.product_id,product_name,product_author,product_editor, jos_vm_product_price.product_price FROM jos_vm_product INNER JOIN jos_vm_product_price ON (jos_vm_product.product_id = jos_vm_product_price.product_id)
 WHERE product_EAN = '$_POST[EAN]'");
 
 while($res = mysql_fetch_array($req))
    {
    // Concatenation des resultats dans une chaine
    echo "$res[product_id]*$res[product_name]*$res[product_author]*$res[product_editor]*$res[product_price]";
	}
      close(); 
  ?>

Je m'excuse, j'aurais certainement du mettre le script fonctionnel avant la tentative de le passer en json. La réponse est donc fournie à partir de cette requête sur un fichier php externe. Elle est envoyée ensuite au script, et découpée et rangée pour donner les champs id,titre,auteur...

Ce script fonctionne, mais on m'a suggéré de passer les retours en Json pour plus de sécurité, même si ce script n'est pas destiné à être mis en ligne.

J'ai beau epluché les tutos sur le net, je ne comprends pas comment faire le retour du json dans le script et obtenir le même résultat...

**NoSmoking** · 10/03/2013, 17h28

je ne comprends pas comment faire le retour du json dans le script et obtenir le même résultat...

Là tu as un soucis mais du coté PHP, peut être qu'il serait mieux de voir du coté de ce forum.

Regarde quand même du coté de json_encode.

**laplumedoie** · 10/03/2013, 18h23

En fait c'est un problème de Javascript/Ajax... on peut éventuellement déplacer ma question dans le forum js

Mais j'ai réellement besoin d'un coup de pouce pour comprendre la syntaxe de Json avec les getElementById

**NoSmoking** · 10/03/2013, 19h19

Bon comme tu ne veux pas nous donner le résultat de ta requête, je vais présumer quelle est conforme...

Voilà un petit exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
</head>
<body>
<input id="date"><br>
<input id="nom"><br>
<input id="prenom"><br>
<script>
var data = '{"date": "10.03.2013", "nom":"Luky", "prenom":"Luke"}';
oData = JSON.parse( data);
for( var i in oData){
  document.getElementById( i).value = oData[i];
}
</script>
</body>
</html>

Attention JSON n'est pas reconnu sur les oldBrowsers comme on dit.

**laplumedoie** · 11/03/2013, 11h07

Je n'ai pas compris ta question alors, vraiment désolé.

Je m'excuse car en fait j'ai crée une confusion en mettant en 1er post une requête que je n'avais pas pu tester, faute de comprendre la syntaxe de récupération. J'aurais du mettre mon script initial, avec ma toute première requête (celle que j'ai postée ensuite).

Avec l'aide d'un membre d'un autre forum, j'ai intégré cette requête là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
  
include('connexion.php');
$connect_db = connect();
 
$i = 0;
$tmp = array();
 
$fetch = mysql_query("SELECT jos_vm_product.product_id,product_name,product_author,product_editor, jos_vm_product_price.product_price FROM jos_vm_product INNER JOIN jos_vm_product_price ON (jos_vm_product.product_id = jos_vm_product_price.product_id)
 WHERE product_EAN = '$_POST[EAN]'");
 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $tmp[$i] = $row;
}
echo json_encode($tmp);
  
close();
?>

Ce qui me retourne (en chargeant directement le fichier php externe) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"product_id":"7097","product_name":"Paix pour tous - Livre audio","product_author":"Wayne W. Dyer","product_editor":"Ada","product_price":"20.28"}]

J'ai changé dans la fonction ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
oData = JSON.parse(xhr.responseText);
for( var i in oData){
  document.getElementById(i).value = oData[i];
}

J'ai regardé avec Firebug, et le Odata se charge bien... et j'ai fini par trouver :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
oData = JSON.parse(xhr.responseText);
for( var i in oData){
  document.getElementById("product_id").value = oData[0].product_id;
  document.getElementById("product_name").value =  oData[0].product_name;
  document.getElementById("product_author").value =  oData[0].product_author;
  document.getElementById("product_editor").value =  oData[0].product_editor;
  document.getElementById("product_price").value =  oData[0].product_price;
}

Pffiu... je crois que j'ai mérité mon kir. Merci beaucoup NoSmoking de ta patience.

**NoSmoking** · 11/03/2013, 21h31

En fait tu reçois un tableau d'objet, avec un seul élément dans ton tableau.
Il faut que tu boucles sur oData[0].

Le code dans ce cas devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var data ='[{"product_id":"7097","product_name":"Paix pour tous - Livre audio","product_author":"Wayne W. Dyer","product_editor":"Ada","product_price":"20.28"}]';
oData = JSON.parse( data);
var obj = oData[0];
for( var key in obj){
  if( document.getElementById( key)){
    document.getElementById( key).value = obj[key];
  }
}

**laplumedoie** · 11/03/2013, 22h01

Merci beaucoup pour la précision. En effet, dans le cas de ma caisse, je retourne obligatoirement qu'un seul enregistrement dans la mesure ou l'ean est unique et remonte donc qu'un seul ouvrage, mais si je déclare ainsi le json, si je scanne un autre ean j'aurais forcément des données différentes, dans ce cas je ne dois pas déclarer des valeurs fixes non ?

**NoSmoking** · 16/03/2013, 09h15

j'aurais forcément des données différentes

l'objet en retour est composé comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
oJson = {
  'cle_1' : valeur_1,
  'cle_2' : valeur_2,
  'cle_3' : valeur_3,
  ... etc ...
  'cle_n' : valeur_n
}

si tu ne fais que changer les valeur_x mais pas les cle_x, ce qui est visiblement le cas, tu peux tout à faire mettre en boucle.

[AJAX] Retour d'un json dans Ajax d'une requête Mysql

AJAX

Discussions similaires

Partager

Partager