[AJAX] envoyer données en JSON par ajax

**altair8080** · 07/08/2011, 12h05

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 :

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
 
$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 :

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
 
<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

**mctarek** · 07/08/2011, 13h24

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 :

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

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 :

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

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.

**altair8080** · 07/08/2011, 14h04

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 :

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
 
<?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 :

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
 
<!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 :

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

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);
                        });
 
}
});

**mctarek** · 07/08/2011, 14h58

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

**altair8080** · 07/08/2011, 15h16

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

**mctarek** · 07/08/2011, 17h50

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 :

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

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 :

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

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 :

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
 
$(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

**altair8080** · 07/08/2011, 19h58

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 :

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

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 ;-)

**mctarek** · 08/08/2011, 07h50

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 :

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

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

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

**Bovino** · 08/08/2011, 08h27

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.

**mctarek** · 08/08/2011, 09h37

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

[AJAX] envoyer données en JSON par ajax

AJAX

Discussions similaires

Partager

Partager