Envoyer des données JSON de Javascript à PHP ?

Question

Comment puis-je envoyer des données JSON depuis Javascript dans le navigateur, vers un serveur et les faire analyser par PHP ?

Answer 1

J'ai obtenu beaucoup d'informations ici, alors je voulais poster une solution que j'ai découverte.

Le problème : Transférer des données JSON de Javascript sur le navigateur vers le serveur, et les faire analyser par PHP.

Environnement : Javascript dans un navigateur (Firefox) sous Windows. Serveur LAMP comme serveur distant : PHP 5.3.2 sur Ubuntu.

Ce qui marche (version 1) :
1) JSON est juste du texte. Du texte dans un certain format, mais juste une chaîne de texte.

2) En Javascript, var str_json = JSON.stringify(myObject) me donne la chaîne JSON.

3) J'utilise l'objet AJAX XMLHttpRequest en Javascript pour envoyer des données au serveur :

request= new XMLHttpRequest()
request.open("POST", "JSON_Handler.php", true)
request.setRequestHeader("Content-type", "application/json")
request.send(str_json)
[... code to display response ...]

4) Sur le serveur, code PHP pour lire la chaîne JSON :

$str_json = file_get_contents('php://input');

Cette opération permet de lire les données brutes du POST. $str_json contient maintenant la chaîne JSON exacte du navigateur.

Ce qui marche (version 2) :
1) Si je veux utiliser le "application/x-www-form-urlencoded" je dois créer une chaîne POST standard de type "x=y&a=b[etc]" de sorte que lorsque PHP l'obtiendra, il pourra le mettre dans la section $_POST tableau associatif. Donc, en Javascript dans le navigateur :

var str_json = "json_string=" + (JSON.stringify(myObject))

PHP sera maintenant capable de remplir le tableau $_POST lorsque j'envoie str_json via AJAX/XMLHttpRequest comme dans la version 1 ci-dessus.

Affichage du contenu de $_POST['json_string'] affichera la chaîne JSON. L'utilisation de json_decode() sur l'élément du tableau $_POST avec la chaîne json décodera correctement ces données et les placera dans un tableau/objet.

Le piège que j'ai rencontré :
Au départ, j'ai essayé d'envoyer la chaîne JSON avec l'en-tête application/x-www-form-urlencoded, puis j'ai essayé de la lire immédiatement dans le tableau $_POST en PHP. Le tableau $_POST était toujours vide. C'est parce qu'il attend des données de la forme yval=xval&[rinse_and_repeat]. Il n'a pas trouvé de telles données, seulement la chaîne JSON, et l'a simplement jetée. J'ai examiné les en-têtes de la requête, et les données POST ont été envoyées correctement.

De même, si j'utilise l'en-tête application/json, je ne peux pas non plus accéder aux données envoyées via le tableau $_POST. Si vous voulez utiliser l'en-tête application/json content-type, vous devez accéder aux données brutes du POST en PHP, via php://input, et non avec $_POST.

Références :
1) Comment accéder aux données POST en PHP : Comment accéder aux données POST en PHP ?
2) Détails sur le type application/json, avec quelques exemples d'objets qui peuvent être convertis en chaînes JSON et envoyés au serveur : http://www.ietf.org/rfc/rfc4627.txt

Answer 2

Fichier Javascript utilisant jQuery (plus propre mais surcharge de la bibliothèque) :

$.ajax({
    type: 'POST',
    url: 'process.php',
    data: {json: JSON.stringify(json_data)},
    dataType: 'json'
});

Fichier PHP (process.php) :

directions = json_decode($_POST['json']);
var_dump(directions);

Notez que si vous utilisez des fonctions de rappel dans votre javascript :

$.ajax({
    type: 'POST',
    url: 'process.php',
    data: {json: JSON.stringify(json_data)},
    dataType: 'json'
})
.done( function( data ) {
    console.log('done');
    console.log(data);
})
.fail( function( data ) {
    console.log('fail');
    console.log(data);
});

Vous devez, dans votre fichier PHP, renvoyer un objet JSON (au format javascript), afin d'obtenir un résultat "done/success" dans votre code Javascript. Au minimum, retournez/imprimez :

print('{}');

Ver La demande Ajax renvoie 200 OK mais l'événement d'erreur est déclenché au lieu de la réussite.

Pour tout ce qui est un peu plus sérieux, vous devriez renvoyer un en-tête approprié, accompagné du code de réponse adéquat.

Answer 3

Exemple simple de JavaScript pour les champs de saisie HTML (envoi au serveur de JSON, analyse de JSON en PHP et renvoi au client) en utilisant AJAX :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
<div align="center">
    <label for="LName">Last Name</label>
    <input type="text" class="form-control" name="LName" id="LName" maxlength="15"
           placeholder="Last name"/>
</div>
<br/>

<div align="center">
    <label for="Age">Age</label>
    <input type="text" class="form-control" name="Age" id="Age" maxlength="3"
           placeholder="Age"/>
</div>
<br/>

<div align="center">
    <button type="submit" name="submit_show" id="submit_show" value="show" onclick="actionSend()">Show
    </button>
</div>

<div id="result">
</div>

<script>
    var xmlhttp;

    function actionSend() {
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var values = $("input").map(function () {
            return $(this).val();
        }).get();
        var myJsonString = JSON.stringify(values);
        xmlhttp.onreadystatechange = respond;
        xmlhttp.open("POST", "ajax-test.php", true);
        xmlhttp.send(myJsonString);
    }

    function respond() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('result').innerHTML = xmlhttp.responseText;
        }
    }

</script>

</body>
</html>

Fichier PHP ajax-test.php :

<?php

$str_json = file_get_contents('php://input'); //($_POST doesn't work here)
$response = json_decode($str_json, true); // decoding received JSON to array

$lName = $response[0];
$age = $response[1];

echo '
<div align="center">
<h5> Received data: </h5>
<table border="1" style="border-collapse: collapse;">
 <tr> <th> First Name</th> <th> Age</th> </tr>
 <tr>
 <td> <center> '.$lName.'<center></td>
 <td> <center> '.$age.'</center></td>
 </tr>
 </table></div>
 ';
?>

Answer 4

Voici un résumé des principales solutions avec un code facile à reproduire :

Méthode 1 (application/json ou text/plain + JSON.stringify)

var data = {foo: 'blah "!"', bar: 123};
var xhr = new XMLHttpRequest();
xhr.open("POST", "test.php");
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }
xhr.setRequestHeader("Content-type", "application/json") // or "text/plain"
xhr.send(JSON.stringify(data)); 

Côté PHP, vous pouvez obtenir les données avec :

print_r(json_decode(file_get_contents('php://input'), true));

Méthode 2 (x-www-form-urlencoded + JSON.stringify)

var data = {foo: 'blah "!"', bar: 123};
var xhr = new XMLHttpRequest();
xhr.open("POST", "test.php");
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("json=" + encodeURIComponent(JSON.stringify(data))); 

Note : encodeURIComponent(...) est nécessaire, par exemple si le JSON contient & caractère.

Côté PHP, vous pouvez obtenir les données avec :

print_r(json_decode($_POST['json'], true));

Méthode 3 (x-www-form-urlencoded + URLSearchParams)

var data = {foo: 'blah "!"', bar: 123};
var xhr = new XMLHttpRequest();
xhr.open("POST", "test.php");
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(new URLSearchParams(data).toString()); 

Côté PHP, vous pouvez obtenir les données avec :

print_r($_POST);

Note : https://caniuse.com/#search=URLSearchParams

Answer 5

PHP possède une fonction intégrée appelée json_decode(). Passez simplement la chaîne JSON à cette fonction et elle la convertira en chaîne, tableau ou objet PHP équivalent.

Afin de le passer en tant que chaîne de caractères à partir de Javascript, vous pouvez le convertir en JSON en utilisant

JSON.stringify(object);

ou une bibliothèque telle que Prototype