web-dev-qa-db-fra.com

Envoyer des données JSON de Javascript à PHP?

Comment puis-je envoyer des données JSON à partir de Javascript dans le navigateur, à un serveur et que PHP les analyse ici?

phpjavascriptajaxjson
42
kermit

J'ai reçu beaucoup d'informations ici, donc je voulais publier une solution que j'ai découverte.

Le problème: Obtenir des données JSON à partir de Javascript sur le navigateur, sur le serveur, et PHP les analyser correctement.

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

Qu'est-ce qui fonctionne (version 1):
1) JSON n'est qu'un texte. 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, PHP code pour lire la chaîne JSON:

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

Ceci lit les données brutes POST. $str_json contient maintenant la chaîne JSON exacte du navigateur.

Qu'est-ce qui fonctionne (version 2):
1) Si je veux utiliser l'en-tête de requête "application/x-www-form-urlencoded", je dois créer une chaîne standard POST de "x=y&a=b[etc]" afin que, lorsque PHP l'obtienne, il puisse la placer dans le tableau associatif $_POST. Donc, en Javascript dans le navigateur:

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

PHP pourra désormais remplir le tableau $ _POST lorsque j'enverrai str_json via AJAX/XMLHttpRequest comme dans la version 1 ci-dessus. 

L'affichage du contenu de $_POST['json_string'] affichera la chaîne JSON. L'utilisation de json_decode () sur l'élément de 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é:
Initialement, j'ai essayé d'envoyer la chaîne JSON avec l'en-tête de application/x-www-form-urlencoded, puis de la lire immédiatement dans le tableau $ _POST en PHP. Le tableau $ _POST était toujours vide. En effet, il attend des données de la forme yval = xval & [rinse_and_repeat]. Il n'a trouvé aucune donnée de ce type, uniquement la chaîne JSON, et l'a simplement jeté. J'ai examiné les en-têtes de requête et les données POST étaient correctement envoyées.

De même, si j'utilise l'en-tête application/json, je ne peux plus accéder aux données envoyées via le tableau $ _POST. Si vous souhaitez utiliser l'en-tête application/json content-type, vous devez accéder aux données brutes POST en PHP, via l'entrée php: //, 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 pouvant être convertis en chaînes JSON et envoyés au serveur: http://www.ietf.org/rfc/rfc4627.txt

53
kermit

Fichier Javascript utilisant jQuery (nettoyant 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 "terminé/réussi" dans votre code Javascript. Au minimum retour/impression:

print('{}');

Voir La demande Ajax renvoie 200 OK mais un événement d'erreur est déclenché au lieu de succès

Bien que pour quelque chose d'un peu plus sérieux, vous devriez renvoyer explicitement un en-tête approprié avec le code de réponse approprié.

15
Cyrille

Exemple simple sur JavaScript pour les champs de saisie HTML (envoi au serveur JSON, analyse de JSON dans PHP et envoi au client) à l'aide d'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>
 ';
?>
5
Aconic

PHP a une fonction intégrée appelée json_decode (). Il suffit de transmettre la chaîne JSON à cette fonction pour la convertir en chaîne, objet ou tableau équivalent PHP.

Pour le passer sous forme de chaîne à partir de Javascript, vous pouvez le convertir en JSON à l'aide de

JSON.stringify(object);

ou une bibliothèque telle que Prototype

4
John

Il existe 3 façons pertinentes d’envoyer des données du côté client (HTML, Javascript, Vbscript, etc.) au côté serveur (PHP, ASP, JSP, etc.).

1. HTML form Posting Request (GET or POST).
2. AJAX (This also comes under GET and POST)
3. Cookie

Formulaire HTML de demande de publication (GET ou POST)

C'est la méthode la plus utilisée et nous pouvons envoyer plus de données avec cette méthode.

AJAX

C'est une méthode asynchrone et cela doit fonctionner de manière sécurisée, ici aussi nous pouvons envoyer plus de données.

Biscuit

C'est un bon moyen d'utiliser une petite quantité de données insensibles. C’est la meilleure façon de travailler avec des bits de données.

Dans votre cas, vous pouvez préférer le formulaire HTML ou AJAX. Mais avant d’envoyer au serveur, validez votre JSON par vous-même ou utilisez un lien du type http://jsonlint.com/

Si un objet Json le convertit en chaîne à l'aide de JSON.stringify (objet), si vous avez une chaîne JSON, envoyez-le tel quel.

4
Robin Michael Poothurai

en utilisant JSON.stringify (yourObj) ou Object.toJSON (yourObj), le dernier sert à utiliser prototype.js, puis envoyez-le en utilisant ce que vous voulez, ajax ou submit, et utilisez comme suggéré json_decode ( http: // www.php.net/manual/en/function.json-decode.php ) pour l’analyser en php. Et ensuite, vous pouvez l'utiliser comme un tableau.

2
khael

Je recommande la méthode jquery.post () .

2
ravi404
    <html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);

var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>
1
jianfeng

Vous pouvez facilement convertir un objet en chaîne codée par url:

function objToUrlEncode(obj, keys) {
    let str = "";
    keys = keys || [];
    for (let key in obj) {
        keys.Push(key);
        if (typeof (obj[key]) === 'object') {
            str += objToUrlEncode(obj[key], keys);
        } else {
            for (let i in keys) {
                if (i == 0) str += keys[0];
                else str += `[${keys[i]}]`
            }
            str += `=${obj[key]}&`;
            keys.pop();
        }
    }
    return str;
}

console.log(objToUrlEncode({ key: 'value', obj: { obj_key: 'obj_value' } }));

// key=value&obj[obj_key]=obj_value&
0
Юрий Столов