JSONPHP

Table des matières

Une utilisation courante de JSON consiste à lire des données à partir d'un serveur Web, et afficher les données dans une page Web.

Ce chapitre vous apprendra comment échanger des données JSON entre le client et un serveur PHP.

Le fichier PHP

PHP possède des fonctions intégrées pour gérer JSON.

Les objets en PHP peuvent être convertis en JSON en utilisant la fonction PHP json_encode() :

Fichier PHP

 <?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New 
  York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>

Le client Javascript

Voici un JavaScript sur le client, utilisant un appel AJAX pour demander le PHP fichier de l'exemple ci-dessus :

Exemple

Utilisez JSON.parse() pour convertir le résultat en un objet JavaScript :

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();
</script>

</body>
</html>

Tableau PHP

Les tableaux en PHP seront également convertis en JSON lors de l'utilisation de la fonction PHP json_encode() :

Fichier PHP

 <?php
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>

Le client Javascript

Voici un JavaScript sur le client, utilisant un appel AJAX pour demander le PHP fichier de l'exemple de tableau ci-dessus :

Exemple

Utilisez JSON.parse() pour convertir le résultat en un tableau JavaScript :

var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p>Convert the data into a JavaScript array:</p>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php");
xmlhttp.send();
</script>

</body>
</html>

Base de données PHP

PHP est un langage de programmation côté serveur et peut être utilisé pour accéder à une base de données.

Imaginez que vous ayez une base de données sur votre serveur et que vous souhaitiez envoyer une requête à du client où vous demandez les 10 premières lignes d'un tableau appelé "clients".

Sur le client, créez un objet JSON qui décrit le nombre de lignes que vous souhaitez renvoyer.

Avant d'envoyer la requête au serveur, convertissez l'objet JSON en un chaîne et envoyez-la en paramètre à l'url de la page PHP :

Exemple

Utilisez JSON.stringify() pour convertir l'objet JavaScript en JSON :

const limit = {"limit":10};
const dbParam = JSON.stringify(limit);
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET","json_demo_db.php?x=" + dbParam);
xmlhttp.send();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p>The JSON received from the PHP file:</p>

<p id="demo"></p>

<script>
const dbParam = JSON.stringify({"limit":10});

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam);
xmlhttp.send();
</script>

</body>
</html>

Exemple expliqué :

Définissez un objet contenant une propriété et une valeur « limite ».
Convertissez l'objet en chaîne JSON.
Envoyez une requête au fichier PHP, avec la chaîne JSON en paramètre.
Attendez que la requête revienne avec le résultat (au format JSON)
Affichez le résultat reçu du fichier PHP.

Jetez un œil au fichier PHP :

Fichier PHP

 <?php
header("Content-Type: application/json; charset=UTF-8");
$obj = 
  json_decode($_GET["x"], false);
  
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
  $outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>

Fichier PHP expliqué :

Convertir la requête en objet, à l'aide de la fonction PHP json_decode().
Accédez à la base de données et remplissez un tableau avec les données demandées.
Ajoutez le tableau à un objet et renvoyez l'objet au format JSON en utilisant la fonction json_encode().

Utiliser les données

Exemple

xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
 
  document.getElementById("demo").innerHTML = text;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Get JSON Data from a PHP Server</h2>
<p id="demo"></p>

<script>
const obj = { "limit":10 };
const dbParam = JSON.stringify(obj);
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = ""
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam);
xmlhttp.send();
</script>

<p>Try changing the "limit" property from 10 to 5.</p>

</body>
</html>

Méthode PHP=POST

Lors de l'envoi de données au serveur, il est souvent préférable d'utiliser la méthode HTTP POST.

Pour envoyer des requêtes AJAX à l'aide de la méthode POST, spécifiez la méthode et l'en-tête correct.

Les données envoyées au serveur doivent maintenant être un argument de la méthode send() :

Exemple

const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  let text ="";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Use HTTP POST to Get JSON Data from a PHP Server</h2>

<p id="demo"></p>

<script>
const dbParam = JSON.stringify({"limit":10});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  myObj = JSON.parse(this.responseText);
  let text = "";
  for (let x in myObj) {
    text += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_db_post.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>

<p>Try changing the "limit" property from 10 to 5.</p>

</body>
</html>

La seule différence dans le fichier PHP est la méthode d'obtention des données transférées.

Fichier PHP

Utilisez $_POST au lieu de $_GET :

 <?php
header("Content-Type: application/json; charset=UTF-8");
  $obj = 
  json_decode($_POST["x"], false);
  
  
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  $stmt = $conn->prepare("SELECT name FROM customers LIMIT ?");
$stmt->bind_param("s", 
  $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
  $outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>