[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

[AJAX] envoyer données en JSON par ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager