[AJAX] envoyer données en JSON par ajax

Version imprimable

Bonjour je souhaite aborder l'échange de données entre le client et le serveur par le biais du json.

J'arrive à retourner du json depuis le serveur mais je n'arrive pas à en envoyer

le serveur (serveur.php)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
 
$chaine = '';
if( isset($_GET['chaine']) ){
    $chaine = $_GET['chaine'];
}
 
 
$retour = array(
    'chaine'    => strtoupper($chaine),
    'date'      => date('d/m/Y H:i:s'),
    'phpversion'=> phpversion()
);
 
// en ne mettant pas le header je peux voir apparaitre le json par un appel direct sur la page serveur
header('Content-type: application/json');
echo json_encode($retour);
?>

le client (client.php)

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
 
<form id="form">
    <input name="chaine" id="chaine" value="contenu_chaine" type="text">
    <input value="Envoyer" id="handle" type="submit">
</form>
 
<div id="retour">
    <i>vide</i>
</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('#form').submit(function(e){
 
        e.preventDefault();
 
 
        $.getJSON(
            'serveur.php',
            {chaine: $('#chaine').val()},
            function(data){
                $('#retour').hide();
                $('#retour').html('')
                    .append('<b>Chaine</b> : '+data.chaine+'<br>')
                    .append('<b>Date</b> : '+data.date+'<br>')
                    .append('<b>Version PHP</b> : '+data.phpversion+'<br>');
                $('#retour').fadeIn();
            }
        );
    });
});
<script>

Merci

Citation:

Envoyé par altair8080

Bonjour je souhaite aborder l'échange de données entre le client et le serveur par le biais du json.

J'arrive à retourner du json depuis le serveur mais je n'arrive pas à en envoyer

le serveur (serveur.php)

Merci

En ce qui me concerne, j'utilise le script json2.js + la méthode JSON.stringify pour envoyer des données d'un formulaire vers un script php au format json.
Je regroupe toutes les données du formulaire dans un objet comme :
Code:

1 2 3 4 5 obj=new Object(); obj["nom"]=$('nom').value; // document.getElementById('nom').value obj["prenom"]=$('prenom').value; var jsondata = JSON.stringify(obj); //convertir l'objet au format json
Et j'envois jsondata dans ma requête Ajax (Si get: url?update=jsondata)

Au niveau PHP
Code:

1 2 3 4 5 6 7 8 9 if (isset($_REQUEST['update'])) { $update = $_REQUEST['update']; // $json = json_decode($update,true); // est un array $json = json_decode($update); // est un objet // extraire les données de l'objet $nom = $json->nom; $prenom = $json->prenom; }
mctarek.

j'ai avancé et modifié mon code. Cela fonctionne ainsi mais les variables sont passées en var1=tt&var2=dffff

je n'arrive pas à envoyer en json et récupérer les informations en retour.

le serveur

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
 
<?php
 
// Récupération des paramètres
 
if( isset( $_POST['name']) ){
    $name = $_POST['name'];
}
 
if( isset($_POST['location']) ){
    $location = $_POST['location'];
}
 
 
// Traitements
$retour = array(
    'name'    => strtoupper($name),
    'location'    => strtoupper($location),
    'date'      => date('d/m/Y H:i:s'),
    'phpversion'=> phpversion()
);
 
// Envoi du retour (on renvoi le tableau $retour encodé en JSON)
header('Content-type: application/json');
echo json_encode($retour);
 
?>

Le client

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html>
 
<html>
<head>
 
<title>test ajax json bidirectionnel</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 
 
	<!-- jQuery -->
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
         <script type="text/javascript" src="requete.js"></script>
 
</body>
</html>

requete.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
$.ajax({
type: "POST", 
url: "serveur.php",    
dataType: 'json',
data: "name=salut&location=moi", 
async: false, 
success: function(data){ 
$.each(data, function(key, value){
                       ;
                        alert(key+"--"+value);
                        });
 
}
});

07/08/2011, 14h58
mctarek

Citation:

Envoyé par altair8080

j'ai avancé et modifié mon code. Cela fonctionne ainsi mais les variables sont passées en var1=tt&var2=dffff

je n'arrive pas à envoyer en json et récupérer les informations en retour.

En testant vos 3 fichiers sur mon serveur local, tout fonctionne bien.

J'exécute la page html > http://127.0.0.1/exp/altair/index.htm (et non pas file:///C://EasyPHP/www/exp/altair/index.htm)

Et j'ai l'alerte [name--SALUT / location--MOI / date--07/08/2011 14:56:25 / phpversion--5.2.17]

mctarek

P.S : Mon précédent message explique comment envoyer des variables en local au format json vers un script PHP
07/08/2011, 15h16
altair8080

Merci mais le problème c'est que je n'ai pas réussi à votre message précédent pour envoyer du JSON en post, le récupérer et le réenvoyer

Citation:

Envoyé par altair8080

Merci mais le problème c'est que je n'ai pas réussi à votre message précédent pour envoyer du JSON en post, le récupérer et le réenvoyer

L'exemple ci-dessous utilisant jQuery + JSON.stringify + JSON.parse va vous éclairer. Il faudra utiliser le script json2.js.

page index.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
<head>
<title>Envoyer/Recevoir un objet JSON à un script PHP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="json2.js"></script>
</head>
<body>
 
<div id="reponseBrut"><span/></div>
<div id="prenomClient"><span/></div>
<script type="text/javascript" src="gestion.js"></script>
 
</body>
</html>

page serveur .php

Code:

1
2
3
4
5
6
 
<?php 
header("Content-type: text/plain; charset=UTF-8");
$res = json_decode(stripslashes($_POST['data']), true);
echo json_encode($res);
?>

page gestion.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(document).ready(function(){ 
  var data = 
  { 
    "client": [ 
      { "nom" : "John", "prenom" : "Brown" },
      { "nom" : "Marc", "prenom" : "Johnson" }
    ] // fin du tableau client
  }
  var dataString = JSON.stringify(data);
  $.post('serveur.php', { data: dataString}, showResult, "text");
});
 
function showResult(res)
{
  $("#reponseBrut").html("Réponse Brut: " +res);
  var obj = JSON.parse(res);
  $("#prenomClient").html("prenom du client[0]: " +obj.client[0].prenom+'<br/>'+"prenom du client[1]: " +obj.client[1].prenom);
}

mctarek

Merci,
Cela fonctionne bien dans ce sens.

Arrives-tu depuis un formulaire à récupérer et convertir les zones ?

j'essaye de cette façon avec name="formulaire" dans form
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(document).ready(function(){ var formVals = $('#formulaire').serializeArray(); var jsonObj = {}; for (i in formVals) jsonObj[formVals[i].name] = formVals[i].value; var dataString = JSON.stringify(jsonObj); alert(dataString); $.post('serveur.php', { data: dataString}, showResult, "text");
mais j'obtiens {}
on peut dire que mes début en ajax,json ne sont pas top ;-)

Citation:
Envoyé par altair8080
Merci,
Cela fonctionne bien dans ce sens.

Arrives-tu depuis un formulaire à récupérer et convertir les zones ?

j'essaye de cette façon avec name="formulaire" dans form
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(document).ready(function(){ var formVals = $('#formulaire').serializeArray(); var jsonObj = {}; for (i in formVals) jsonObj[formVals[i].name] = formVals[i].value; var dataString = JSON.stringify(jsonObj); alert(dataString); $.post('serveur.php', { data: dataString}, showResult, "text");
mais j'obtiens {}
on peut dire que mes début en ajax,json ne sont pas top ;-)
Salut altair8080. Vois tu, j'en suis au milieu de mon ouvrage sur jQuery :D
Alors, je découvre les fonctions serializeArray()/serialize().
L'idée est là: "objectiser" les éléments du formulaire, les "stringifier" en JSON, puis les "POSTer". Il ne me reste plus qu'à étudier la suite...mctarek

08/08/2011, 08h27
Bovino

Envoyer des données au serveur au format JSON est inutile et incohérent !
Toutes les données reçues par le serveur doivent être vérifiées, il est donc préférable de les passer "normalement" (en paramètres GET, quitte à les mettre ensuite au format JSON.

Ensuite, il faut bien faire attention que le paramètre dataType correspond à ce qui est attendu en retour, absolument pas à ce qui est envoyé.

Donc comprends bien que si jQuery ne propose pas l'envoi au format JSON (qui ne serait de toute façon qu'une chaine comme les autres), c'est parce que c'est à priori une erreur de vouloir le faire.
08/08/2011, 09h37
mctarek

Citation:

Envoyé par Bovino

Envoyer des données au serveur au format JSON est inutile et incohérent !
Toutes les données reçues par le serveur doivent être vérifiées, il est donc préférable de les passer "normalement" (en paramètres GET, quitte à les mettre ensuite au format JSON.

Ensuite, il faut bien faire attention que le paramètre dataType correspond à ce qui est attendu en retour, absolument pas à ce qui est envoyé.

Donc comprends bien que si jQuery ne propose pas l'envoi au format JSON (qui ne serait de toute façon qu'une chaine comme les autres), c'est parce que c'est à priori une erreur de vouloir le faire.

Merci Bovino. Je vais méditer sur tes propos et travailler sur l'intérêt et l'usage de la fonction serializeArray() en parallèle. mctarek