Enviar datos JSON desde Javascript a PHP?

he conseguido mucha información por aquí, así que quería publicar una solución que he descubierto.

El problema: Obtener datos JSON desde Javascript en el navegador, el servidor, y teniendo en PHP con éxito analizarlo.

medio Ambiente: Javascript en un navegador (Firefox) en Windows. LÁMPARA de servidor como servidor remoto: PHP 5.3.2 en Ubuntu.

Lo que funciona (versión 1):

1) JSON es sólo un texto. De texto en un formato determinado, sino simplemente una cadena de texto.

2) En Javascript, var str_json = JSON.stringify(myObject) me da la cadena JSON.

3) yo uso el AJAX objeto XMLHttpRequest en Javascript para enviar los datos al servidor:

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) En el servidor, el código PHP para leer la cadena JSON:

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

Este lee los raw POSTERIOR de los datos. $str_json ahora contiene exactamente cadena JSON desde el navegador.

Lo que funciona (versión 2):

1) Si quiero usar el "application/x-www-form-urlencoded" el encabezado de la solicitud, necesito crear un mensaje estándar de la cadena de "x=y&a=b[etc]" de modo que cuando PHP se pone, se puede poner en el $_POST matriz asociativa. Así, en Javascript en el navegador:

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

PHP ahora será capaz de rellenar el array de $_POST cuando puedo enviar str_json a través de AJAX/XMLHttpRequest como en la versión 1 de arriba.

Visualización de los contenidos de $_POST['json_string'] mostrará la cadena JSON. El uso de json_decode() en el $_POST elemento de la matriz con la cadena json correctamente decodificar los datos y ponerlo en una matriz o un objeto.

La trampa me encontré en:

Al principio, traté de enviar la cadena JSON con el encabezado de la aplicación/x-www-form-urlencoded y, a continuación, trató de leer inmediatamente fuera de la $_POST matriz en PHP. El array de $_POST siempre estaba vacía. Eso es porque se está a la espera de los datos de la forma yval=xval&[rinse_and_repeat]. Sin embargo, no encontró tales datos, sólo la cadena JSON, y simplemente se la tiró a la basura. He examinado los encabezados de solicitud, y el POST de que los datos se envían correctamente.

Del mismo modo, si yo uso el application/json encabezado, yo de nuevo, no puede acceder a los datos enviados a través del array de $_POST. Si desea utilizar el application/json encabezado de tipo de contenido, entonces usted debe tener acceso a la cruda POST de datos en PHP, a través de php://input, no con $_POST.

Referencias:

1) Cómo acceder a los datos POST en PHP: Cómo acceder a los datos POST en PHP?

2) Detalles sobre el application/json tipo, con algunos ejemplos de objetos que se pueden convertir cadenas JSON y se envía al servidor: http://www.ietf.org/rfc/rfc4627.txt

Archivo Javascript usando jQuery (más limpia, pero la biblioteca de la sobrecarga):

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

Archivo PHP (process.php):

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

Tenga en cuenta que si utiliza funciones de devolución de llamada en tu 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);
});

Debe, en su archivo PHP, devolver un objeto JSON (javascript formato), con el fin de obtener un «hecho/éxito’ resultado en el código Javascript. En un mínimo de devolución/imprimir:

print('{}');

Ver Petición Ajax de retorno de 200 OK pero error evento es disparado en lugar de éxito

Aunque para algo un poco más grave que debe ser enviando un adecuado encabezado explícitamente con el correspondiente código de respuesta.

Ejemplo Simple en JavaScript para HTML input-campos (enviar al servidor JSON, el análisis de JSON en PHP y envío a cliente) el uso de 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>

Archivo 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 se ha construido en función json_decode(). Acaba de pasar la cadena JSON en esta función y se va a convertir para el PHP equivalente string, array o un objeto.

Con el fin de pasar como una cadena de Javascript, puede convertir a JSON utilizando

JSON.stringify(object);

o de una biblioteca, tales como Prototipo

Hay 3 formas relevantes para enviar Datos desde el Lado del cliente (HTML, Javascript, Vbscript, etc..) para el Lado del Servidor (PHP, ASP, JSP, etc…)

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

HTML del formulario de Publicación de la Solicitud (GET o POST)

Este es el método más comúnmente utilizado, y podemos enviar más Datos a través de este método

AJAX

Este es el método Asincrónico y este tiene que trabajar de manera segura, aquí también nos puede enviar más Datos.

Cookie

Esta es bonito use una pequeña cantidad de insensible de datos. esta es la mejor manera de trabajar con los bits de datos.

En su caso, Usted puede preferir formulario HTML post o AJAX. Pero antes de enviarlos al servidor de validar su json por usted mismo o utilizar el enlace de como http://jsonlint.com/

Si usted tiene un Objeto Json convertirlo en una Cadena JSON.stringify(objeto), Si tiene cadena JSON enviar como es.

el uso de JSON.stringify(yourObj) o el Objeto.toJSON(yourObj) último es para el uso de prototype.js, a continuación, enviar de usar lo que quieras, ajax o presentar y utilizar, como se ha sugerido, json_decode ( http://www.php.net/manual/en/function.json-decode.php ) para analizar en php. Y, a continuación, se puede utilizar como una matriz.

Recomiendo la jquery.post() método.

    <html>
<script type="text/javascript">
var myJSONObject = {"bindings": 11};
alert(myJSONObject);
var stringJson =JSON.stringify(myJSONObject);
alert(stringJson);
</script>
</html>

Usted puede convertir el objeto en cadena urlencoded:

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&

He encontrado manera fácil de hacer, pero sé que no es perfecto

1.asignar json

si JSON es

var data = [
{key:1,n: "Eve"}
,{key:2,n:"Mom"} 
];

en —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>

en —— second.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>