¿Cómo puedo enviar datos JSON desde Javascript en el navegador, a un servidor y PHP parse ahí?

  • json_decode podría ser lo que estás buscando?
  • esto le ayudará a: [enviar datos json desde javascript][1] [1]: stackoverflow.com/questions/1255948/…
  • Esto podría ayudarle a stackoverflow.com/…
  • Hola a todos, gracias por las respuestas. En realidad, tengo una solución completa y bien. Quería publicar a este sitio, porque yo vengo aquí todo el tiempo para la información y la quería para finalmente proporcionar cierta información. Pero acabo de crear mi cuenta, y no me permite enviar la respuesta por 8 horas 🙁
InformationsquelleAutor kermit | 2011-12-22

10 Comentarios

  1. 56

    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

    • Otra cosa que puede suceder, y esto se aplica a la versión 1, que es magic_quotes puede ser activado en su PHP.en el archivo ini. lo que sucede es que en lugar de recibir un json de tipo {«nombre»:»el Pingüino»} .. usted puede encontrar .. {\»nombre\»:\»el Pingüino\»} … Usted puede usar la función de php stripslashes() en su GET o POST de datos/variables globales con el fin de deshacerse de ellos y el proceso de su json correctamente.
    • Puedo saber lo que es el tercer parámetro en la request.setRequestHeader es para?
    • eso es un error. Buena captura. Debe ser en la función open (). Voy a corregirlo ahora. Más detalles aquí: w3.org/TR/2014/WD-XMLHttpRequest-20140130 y aquí: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
    • Puede usted por favor mencionar algunas de las prácticas de seguridad que debo seguir en el serverside?
    • 1) Cifrar la conexión con la PKI; 2) el Uso de PHP sesiones junto con un mecanismo de inicio de sesión (que significa obligar a los usuarios a seleccionar un nombre de usuario y contraseña se almacenan en una tabla); 3) Conocer la diferencia entre el cifrado (AES) de una vía y un hash (MD5, SHA1); 4) no se permite a los usuarios de la lista de archivos en el servidor; 5) el Uso de un único punto de entrada del archivo en el servidor, que llama a otro archivo oculto para hacer el procesamiento desea; 6) No permitir la remota raíz de inicios de sesión en el servidor; 7) Aprender iptables (pronto nftables) – cerrar innecesarios puertos. 8) el Uso de Fail2ban si usted administrar el servidor.
    • Se escribe «Este lee los raw POST data». Que no es totalmente correcto. Lee el «cuerpo» de cualquier solicitud. Prácticamente esto también podría ser una solicitud PUT. Técnicamente se podría incluso ser cualquier otra solicitud, tales como GET / ELIMINAR / CABEZA, que normalmente están destinados a ignorar el cuerpo.
    • Me hizo el trabajo dentro de wordpress… Gracias Compañero 🙂

  2. 16

    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.

    • Esto realmente debe ser la respuesta seleccionada en mi humilde opinión.
    • la cuestión era cómo hacer en JS pero esta respuesta es usando jQuery también, así que no es puro JS 😉
  3. 6

    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>
    ';
    ?>
  4. 4

    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

  5. 4

    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.

    • ¿Esta respuesta es útil para usted?
    • Es útil, gracias. Originalmente publicado mi pregunta con la intención de responder al instante, originalmente. Sin embargo, para evitar el spam y las cuentas falsas, la stackoverflow primer post y auto-respuesta son los mecanismos de hacerme esperar por un tiempo. He recibido una gran cantidad de información de aquí y quería proporcionar cierta información a los lectores. Su respuesta definitivamente proporcionar información a los lectores.
    • gracias por la respuesta, marque cualquiera de respuesta como aceptar, usted puede marcar su propia respuesta también.
  6. 2

    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.

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

    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&
  9. -2

    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>

Dejar respuesta

Please enter your comment!
Please enter your name here