informaticaPC

Tutorial de JQuery

Usando JSON con PHP


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Utilizando JSON

La forma más sencilla de realizar peticiones AJAX recibiendo los datos en forma de objetos JSON es utilizar el método getJSON() (el cual emplea el método GET para realizarlas). Veamos un ejemplo.

index1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | JSON con JQuery I</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Dar el foco al recuadro del código
            $("#codigo").focus();

            // -----------------------------

            // Al hacer clic en el botón para buscar
            $("#calcular").click(function()
            {
                // Enviar la petición mediante GET
                $.getJSON("json1.php",
                          { _num1 : $("#num1").val(), _num2 : $("#num2").val() },
                          mostrarDatos);
            });

        });

        // -----------------------------

        // Carga los datos recibidos en los cuadros de texto
        function mostrarDatos( datos )
        {
            $("#resultado").attr("value", datos.resultado );
        }

    </script>
  </head>

  <body>

        <label for="num1">Número 1:</label>
        <input type="text" name="num1" id="num1" size="2" value="25" readonly="readonly" />

        <label for="num2">Número 2:</label>
        <input type="text" name="num2" id="num2" size="2" value="4" readonly="readonly" />

        <label for="resultado">Resultado:</label>
        <input type="text" name="resultado" id="resultado" value="" readonly="readonly" />

        <input type="button" name="calcular" id="calcular" value="Calcular" />

  </body>

</html>

json1.php:

<?php
    if( !empty($_GET) && isset($_GET['_num1']) && isset($_GET['_num2']) )
    {
        $resultado = $_GET['_num1'] * $_GET['_num2'];

        // Devolver el resultado en formato JSON
        echo '{ "resultado" : '.$resultado.' }';
    }
    else
    {
        echo "Acceso no autorizado";
    }
?>

Ejemplo

Otra forma más completa de usar JSON es con el método ajax() (explicado anteriormente) definiendo su propiedad dataType con valor 'json'.

Veamos a continuación un ejemplo (observa cómo se construye en PHP la cadena en formato JSON antes de devolverla).

index2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | JSON con JQuery II</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #codigo { text-align:center; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Dar el foco al recuadro del código
            $("#codigo").focus();

            // -----------------------------

            // Al hacer clic en el botón para buscar
            $("#buscar").click(function()
            {
                var codigo = $("#codigo").val();
                $("#log").text( "Código a buscar: [" + codigo + "]" );

                // Enviar la petición mediante POST
                $.ajax({
                        async: true,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        url: "json2.php",
                        data: "codigo="+codigo,
                        beforeSend: antesEnvio,
                        success: mostrarDatos,
                        timeout: 4000,
                        error: errorEnvio
                });

                return false;
            });

        });

        // -----------------------------

        // Antes de enviar los datos
        function antesEnvio() {
            $("#log").text("Se procesa la función 'antesEnvio()' antes de enviarse los datos...");
        }

        // -----------------------------

        // En caso de error
        function errorEnvio() {
            $("#log").text("Ha ocurrido un error!");
        }

        // -----------------------------

        // Carga los datos recibidos en los cuadros de texto
        function mostrarDatos( datos )
        {
            $("#nombre").attr("value", datos.nombre );
            $("#apellidos").attr("value", datos.apellido1 + " " + datos.apellido2 );
            $("#fnac").attr("value", datos.fnac );
            $("#cuota").attr("value", datos.cuota );
        }

    </script>
  </head>

  <body>

    <div id="log"> </div>

    <p>Introduce un código del 1 al 3:</p>

    <label for="codigo">Código:</label>
    <input type="text" name="codigo" id="codigo" size="2" maxlength="2" value="" />

    <input type="button" name="buscar" id="buscar" value="Buscar" /><p />

    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" id="nombre" value=""  readonly="readonly" /><br />

    <label for="apellidos">Apellidos:</label>
    <input type="text" name="apellidos" id="apellidos" value="" readonly="readonly" /><br />

    <label for="fnac">F/Nacimiento:</label>
    <input type="text" name="fnac" id="fnac" value="" readonly="readonly" size="10" /><br />

    <label for="cuota">Cuota:</label>
    <input type="text" name="cuota" id="cuota" value="" readonly="readonly" size="4" />

  </body>

</html>

json2.php:

<?php

    if( !empty($_POST) && isset($_POST['codigo']) )
    {
        switch( $_POST['codigo'] )
        {
            case 1:
                echo '{ "nombre":"Pedro", "apellido1":"Manrique", "apellido2":"Sosa", "fnac":"15/02/1970", "cuota":20 }';
                break;
            case 2:
                echo '{ "nombre":"Raquel", "apellido1":"Vera", "apellido2":"Déniz", "fnac":"15/07/1972", "cuota":22 }';
                break;
            case 3:
                echo '{ "nombre":"Antonio", "apellido1":"Ronda", "apellido2":"Cuadrado", "fnac":"20/11/1974", "cuota":30 }';
                break;
            default:
                echo "Código no encontrado";
        }
    }
    else
    {
        echo "Acceso no autorizado";
    }

?>

Ejemplo

En el ejemplo anterior hemos enviamos un único valor a PHP, pero dado que estamos tratando con JSON es posible enviar un objeto que contenga otros datos:

index3.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | JSON con JQuery III</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Dar el foco al recuadro del código
            $("#codigo").focus();

            // -----------------------------

            // Al hacer clic en el botón para calcular
            $("#calcular").click(function()
            {
                var operacion = $("#operacion").val();
                var num1 = $("#num1").val();
                var num2 = $("#num2").val();

                // Creamos un objeto con los datos a enviar
                var objDatos = { "_operacion" : operacion, "_num1" : num1, "_num2" : num2 };

                // Enviar la petición mediante POST
                $.ajax({
                        async: true,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        url: "json3.php",
                        data: objDatos,
                        success: mostrarDatos,
                        beforeSend: antesEnvio,
                        timeout: 4000,
                        error: errorEnvio
                });

                return false;
            });

        });

        // -----------------------------

        // Antes de enviar los datos
        function antesEnvio() {
            $("#log").text("Se procesa la función 'antesEnvio()' antes de enviarse los datos...");
        }

        // -----------------------------

        // En caso de error
        function errorEnvio() {
            $("#log").text("Ha ocurrido un error!");
        }

        // -----------------------------

        // Mostrar el resultado
        function mostrarDatos( datos )
        {
            $("#resultado").attr("value", datos.resultado);
        }

    </script>
  </head>

  <body>

        <div id="log"> </div>

        <label for="operacion">Operación:</label>
        <input type="text" name="operacion" id="operacion" size="2" value="SUMA" readonly="readonly" />

        <label for="num1">Número 1:</label>
        <input type="text" name="num1" id="num1" size="2" value="30" readonly="readonly" />

        <label for="num2">Número 2:</label>
        <input type="text" name="num2" id="num2" size="2" value="50" readonly="readonly" />

        <label for="resultado">Resultado:</label>
        <input type="text" name="resultado" id="resultado" value="" readonly="readonly" />

        <input type="button" name="calcular" id="calcular" value="Calcular" />

  </body>

</html>

json3.php:

<?php
    if( !empty($_POST) && isset($_POST['_operacion']) )
    {
        $resultado = $_POST['_num1'] + $_POST['_num2'];

        if( $_POST['_operacion'] == "SUMA")
            echo '{ "resultado" : '.$resultado.' }';
        else
            echo '{ "resultado" : -1 }';
    }
    else
    {
        echo "Acceso no autorizado";
    }
?>

Ejemplo

Para finalizar veamos un último ejemplo en el que desde PHP se devuelve un array de objetos JSON (observa que en esta ocasión usamos la función de PHP json_encode() para convertir un array a formato JSON en lugar de devolver directamente la cadena que lo representa).

index4.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | JSON con JQuery IV</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
        #resultado { background-color:lightgray;margin-top:10px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Dar el foco al recuadro del código
            $("#codigo").focus();

            // -----------------------------

            // Al hacer clic en el botón para buscar
            $("#cargar").click(function()
            {
                // Enviar la petición mediante POST
                $.ajax({
                        async: true,
                        type: "POST",
                        dataType: "json",
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        url: "json4.php",
                        beforeSend: antesEnvio,
                        success: mostrarDatos,
                        timeout: 4000,
                        error: errorEnvio
                });

                return false;
            });

        });

        // -----------------------------

        // Antes de enviar los datos
        function antesEnvio() {
            $("#log").text("Se procesa la función 'antesEnvio()' antes de enviarse los datos...");
        }

        // -----------------------------

        // En caso de error
        function errorEnvio() {
            $("#log").text("Ha ocurrido un error!");
        }

        // -----------------------------

        // Carga los datos recibidos en los cuadros de texto
        function mostrarDatos( aDatos )
        {
            var html;

            html = "<p>Se encontraron [" + aDatos.length + "] registro(s)</p>";

            html += "<table border='1'>";
            html +=     "<thead>";
            html +=         "<tr>";
            html +=             "<th>Nombre</th>";
            html +=             "<th>Apellido 1º</th>";
            html +=             "<th>Apellido 2º</th>";
            html +=             "<th>F/Nacimiento</th>";
            html +=             "<th>Cuota</th>";
            html +=         "</tr>";
            html +=     "</thead>";

            for( var contador=0; contador < aDatos.length; contador++ )
            {
                html += "<tr>";

                html += "<td>" + aDatos[contador].nombre    + "</td>";
                html += "<td>" + aDatos[contador].apellido1 + "</td>";
                html += "<td>" + aDatos[contador].apellido2 + "</td>";
                html += "<td>" + aDatos[contador].fnac      + "</td>";
                html += "<td>" + aDatos[contador].cuota     + "</td>";

                html += "</tr>";
            }

            html += "</table>";

            $("#resultado").html( html );
        }

    </script>
  </head>

  <body>

    <div id="log"> </div>

    <input type="button" name="cargar" id="cargar" value="Cargar datos" />

    <div id="resultado"> </div>

  </body>

</html>

json4.php:

<?php
    $aDatos = array();

    $aDatos[] = array( 'nombre' => 'Pedro', 'apellido1' => 'Manrique', 'apellido2' => 'Sosa', 'fnac' => '15/02/1970', 'cuota' => 20 );
    $aDatos[] = array( 'nombre' => 'Raquel', 'apellido1' => 'Vera', 'apellido2' => 'Déniz', 'fnac' => '15/07/1972', 'cuota' => 22 );
    $aDatos[] = array( 'nombre' => 'Antonio', 'apellido1' => 'Ronda', 'apellido2' => 'Cuadrado', 'fnac' => '20/11/1974', 'cuota' => 30 );

    // Utilizamos la función de PHP 'json_encode()' para convertir el array a formato JSON antes de devolverlo
    echo json_encode($aDatos);
?>

Ejemplo

Más información

Vea también: [ AJAX ] - [ getJSON() ] - [ ajax() ] - [ json_encode() ] - [ json_decode() ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso