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 avoir PHP parse il là?
9 réponses
j'ai obtenu beaucoup d'informations ici, donc je voulais poster une solution que j'ai découvert.
le problème: obtenir des données JSON de Javascript sur le navigateur, vers le serveur, et avoir PHP analyser avec succès.
Environnement: Javascript dans un navigateur (Firefox) sur Windows. LAMP server en tant que serveur distant: PHP 5.3.2 sur Ubuntu.
Ce qui fonctionne (version 1):
1) JSON est juste le 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, code PHP pour lire la chaîne JSON:
$str_json = file_get_contents('php://input');
cela lit les données brutes POST. $str_json contient maintenant la chaîne exacte JSON du navigateur.
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 de caractères standard de "x=y&a=b[etc]" pour que lorsque PHP l'obtient, il puisse le mettre dans le tableau associatif $_POST . Donc, en Javascript dans le navigateur:
var str_json = "json_string=" + (JSON.stringify(myObject))
PHP sera maintenant capable de peupler le tableau $_POST quand 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. Utiliser json_decode () sur l'élément $_POST array avec la chaîne json va correctement décoder ces données et les mettre 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 à partir du 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 il l'a simplement jeté. J'ai examiné les en-têtes de la demande, et les données POST ont été envoyés correctement.
De même, si j'utilise l'en-tête application/json, Je ne peux pas accéder aux données envoyées via le tableau $_POST. Si vous voulez utiliser l'en-tête application/json content-type, alors vous devez accéder aux données brutes POST en PHP, via php://input, pas 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
fichier Javascript à l'aide de jQuery (plus propre, mais la bibliothèque de frais généraux):
$.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, retourner un objet JSON (dans le formatage javascript), afin d'obtenir un résultat 'fait/succès' dans votre code Javascript. À un minimum de retour / d'impression:
print('{}');
Voir requête Ajax retour 200 OK mais événement d'erreur est déclenché au lieu de succès
bien que pour quelque chose d'un peu plus grave, vous devriez renvoyer un en-tête approprié explicitement avec le code de réponse approprié.
exemple Simple sur JavaScript pour les champs D'entrée HTML (envoi au serveur JSON, parsing JSON en PHP et retour 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>
';
?>
PHP a une fonction intégrée appelée json_decode (). Il suffit de passer la chaîne JSON dans cette fonction et elle la convertira en chaîne, tableau ou objet équivalent en PHP.
pour le passer comme une chaîne de caractères de Javascript, vous pouvez le convertir en JSON en utilisant
JSON.stringify(object);
ou une bibliothèque telle Qu'un Prototype
il y a 3 façons pertinentes d'envoyer des données du côté du client (HTML, Javascript, Vbscript ..etc) pour le 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 Affichage de Requête (GET ou POST)
c'est la méthode la plus couramment utilisée, et nous pouvons envoyer plus de données par cette méthode
AJAX
c'est une méthode asynchrone et cela doit fonctionner avec ici aussi nous pouvons envoyer plus de données.
Cookie
c'est une bonne façon d'utiliser une petite quantité de données insensibles. c'est la meilleure façon de travailler avec les bits de données.
dans votre cas, vous pouvez préférer HTML form post ou AJAX. Mais avant d'envoyer au serveur valider votre json par vous-même ou utiliser le lien comme http://jsonlint.com /
si vous avez un objet Json convertissez-le en chaîne en utilisant JSON.stringify (object), si vous avez JSON string, envoyez-le tel quel.
utilisant JSON.stringify (yourObj) ou objet.toJSON (yourObj) le dernier est pour l'utilisation de prototype.js, puis l'envoyer en utilisant ce que vous voulez, ajax ou submit, et vous utilisez, comme suggéré, json_decode ( http://www.php.net/manual/en/function.json-decode.php ) pour l'analyser en php. Et puis vous pouvez l'utiliser comme un tableau.
<html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);
var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>
j'ai trouvé un moyen facile à faire mais je sais qu'il n'est pas parfait
1.assigner json à
si vous êtes
var data = [
{key:1,n: "Eve"}
,{key:2,n:"Mom"}
];
sous-le-main.php - - -
<form action="second.php" method="get" >
<input name="data" type="text" id="data" style="display:none" >
<input id="submit" type="submit" style="display:none" >
</form>
<script>
var data = [
{key:1,n: "Eve"}
,{key:2,n:"Mom"} ];
function setInput(data){
var input = document.getElementById('data');
input.value = JSON.stringify(data);
var submit =document.getElementById('submit');
//to submit and goto second page
submit.click();
}
//call function
setInput(data);
</script>
------ de seconde en seconde.php - - - - -
<script>
printJson();
function printJson(){
var data = getUrlVars()["data"];
//decode uri to normal character
data = decodeURI(data);
//for special character , / ? : @ & = + $ #
data = decodeURIComponent(data);
//remove " ' " at first and last in string before parse string to JSON
data = data.slice(1,-1);
data = JSON.parse(data);
alert(JSON.stringify(data));
}
//read get variable form url
//credit http://papermashup.com/read-url-get-variables-withjavascript/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>