[AJAX] Retour d'un json dans Ajax d'une requête Mysql
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:
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:
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:
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> |
