Json

Utilizando JSON
La forma ms sencilla de realizar peticiones AJAX recibiendo los datos en forma de objetos JSON es utilizar
el mtodo getJSON() (el cual emplea el mtodo GET para realizarlas). Veamos un ejemplo.
index1.html:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

html1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3.
4.
<head>
5.
<title>InformaticaPC | JSON con JQuery I</title>
6.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7.
8.
9.
10.
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
</style>
11.
12.
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
13.
14.
<script type="text/javascript">
15.
16.
$(document).ready(function()
17.
18.
19.
// Dar el foco al recuadro del cdigo
20.
$("#codigo").focus();
21.
22.
// -----------------------------
23.
24.
// Al hacer clic en el botn para buscar
25.
$("#calcular").click(function()
26.
27.
// Enviar la peticin mediante GET
28.
$.getJSON("json1.php",
29.
{ _num1 : $("#num1").val(), _num2 : $("#num2").val() },
30.
mostrarDatos);
31.
});
32.
33.
});
34.
35.
// -----------------------------
36.
37.
38.
// Carga los datos recibidos en los cuadros de texto
function mostrarDatos( datos )
39.
40.
41.
$("#resultado").attr("value", datos.resultado );
}
42.
43.
44.
</script>
</head>
45.
46.
<body>
47.
48.
<label for="num1">Nmero 1:</label>
49.
<input type="text" name="num1" id="num1" size="2" value="25" readonly="readonl

y" />
50.
51.
52.
<input type="text" name="num2" id="num2" size="2" value="4" readonly="readonly

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

" />
56.
57.
<input type="button" name="calcular" id="calcular" value="Calcular" />
58.
59.
</body>
60.
61. </html>
Collapse Code
json1.php:
1. <?php
2.
if( !empty($_GET) && isset($_GET['_num1']) && isset($_GET['_num2']) )
3.
4.
{
$resultado = $_GET['_num1'] * $_GET['_num2'];
5.
6.
// Devolver el resultado en formato JSON
7.
echo '{ "resultado" : '.$resultado.' }';
8.
9.
else
10.
11.
echo "Acceso no autorizado";
12.
13. ?>
Collapse Code
Otra forma ms completa de usar JSON es con el mtodo ajax() (explicado anteriormente) definiendo su
propiedad dataType con valor 'json'.
Veamos a continuacin un ejemplo (observa cmo se construye en PHP la cadena en formato JSON antes de
devolverla).
index2.html:

3.
4.
<head>
5.
<title>InformaticaPC | JSON con JQuery II</title>
6.
7.
8.
9.
10.
#codigo { text-align:center; }
11.
#log { color:yellow;background-color:red;margin-bottom:10px; }
12.
</style>
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
// -----------------------------
25.
26.
27.
$("#buscar").click(function()
28.
29.
var codigo = $("#codigo").val();
30.
$("#log").text( "Cdigo a buscar: [" + codigo + "]" );
31.
32.
33.
// Enviar la peticin mediante POST
$.ajax({
34.
async: true,
35.
type: "POST",
36.
dataType: "json",
37.
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
38.
url: "json2.php",
39.
data: "codigo="+codigo,
40.
beforeSend: antesEnvio,
41.
success: mostrarDatos,
42.
timeout: 4000,
43.
error: errorEnvio
44.
});
45.
46.
return false;
47.
});
48.
49.
});
50.
51.
// -----------------------------
52.
53.
54.
// Antes de enviar los datos
function antesEnvio() {
55.
$("#log").text("Se procesa la funcin 'antesEnvio()' antes de enviarse los

datos...");
56.
57.
58.
// -----------------------------
59.
60.
61.
// En caso de error
function errorEnvio() {
62.
63.
$("#log").text("Ha ocurrido un error!");

}
64.
65.
// -----------------------------
66.
67.
68.
69.
70.
$("#nombre").attr("value", datos.nombre );
71.
$("#apellidos").attr("value", datos.apellido1 + " " + datos.apellido2 );
72.
$("#fnac").attr("value", datos.fnac );
73.
$("#cuota").attr("value", datos.cuota );
74.
75.
76.
77.
</script>
</head>
78.
79.
<body>
80.
81.
<div id="log"> </div>
82.
83.
<p>Introduce un cdigo del 1 al 3:</p>
84.
85.
<label for="codigo">Cdigo:</label>
86.
<input type="text" name="codigo" id="codigo" size="2" maxlength="2" value="" />
87.
88.
<input type="button" name="buscar" id="buscar" value="Buscar" /><p />
89.
90.
<label for="nombre">Nombre:</label>
91.
<input type="text" name="nombre" id="nombre" value=""
readonly="readonly" /><br /
>
92.
93.
<label for="apellidos">Apellidos:</label>
94.
<input type="text" name="apellidos" id="apellidos" value="" readonly="readonly" />

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

<br />
98.
99.
<label for="cuota">Cuota:</label>
100.
<input type="text" name="cuota" id="cuota" value="" readonly="readonly" size
="4" />
101.
102.
</body>
103.
104.
</html>
Collapse Code
json2.php:
1. <?php
2.
3.
if( !empty($_POST) && isset($_POST['codigo']) )
4.
5.
switch( $_POST['codigo'] )
6.
7.
case 1:
8.
echo '{ "nombre":"Pedro", "apellido1":"Manrique", "apellido2":"Sosa", "fnac":

"15/02/1970", "cuota":20 }';
9.
break;
10.
case 2:
11.
echo '{ "nombre":"Raquel", "apellido1":"Vera", "apellido2":"Dniz", "fnac":"1

5/07/1972", "cuota":22 }';
12.
break;
13.
case 3:
14.
echo '{ "nombre":"Antonio", "apellido1":"Ronda", "apellido2":"Cuadrado", "fna

c":"20/11/1974", "cuota":30 }';
15.
break;
16.
default:
17.
echo "Cdigo no encontrado";
18.
19.
20.
else
21.
22.
23.
24.
25. ?>
Collapse Code
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:

3.
4.
<head>
5.
<title>InformaticaPC | JSON con JQuery III</title>
6.
7.
8.
9.
10.
11.
</style>
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
// -----------------------------
24.
25.
// Al hacer clic en el botn para calcular
26.
$("#calcular").click(function()
27.
28.
var operacion = $("#operacion").val();
29.
var num1 = $("#num1").val();
30.
var num2 = $("#num2").val();
31.
32.
33.
// Creamos un objeto con los datos a enviar
var objDatos = { "_operacion" : operacion, "_num1" : num1, "_num2" : num2 };
34.
35.
36.
$.ajax({
37.
async: true,
38.
type: "POST",
39.
dataType: "json",
40.
contentType: "application/x-www-form-urlencoded; charset=UTF-8

",
41.
url: "json3.php",
42.
data: objDatos,
43.
44.
45.
timeout: 4000,
46.
error: errorEnvio
47.
});
48.
49.
return false;
50.
});
51.
52.
});
53.
54.
// -----------------------------
55.
56.
57.
58.

datos...");
59.
60.
61.
// -----------------------------
62.
63.
// En caso de error
64.
65.
66.
67.
68.
// -----------------------------
69.
70.
71.
// Mostrar el resultado
72.
73.
$("#resultado").attr("value", datos.resultado);
74.
75.
76.
77.
</script>
</head>
78.
79.
<body>
80.
81.
82.
83.
<label for="operacion">Operacin:</label>
84.
<input type="text" name="operacion" id="operacion" size="2" value="SUMA" reado

nly="readonly" />
85.
86.
87.

y" />
88.
89.
90.

y" />
91.
92.
<label for="resultado">Resultado:</label>
93.
<input type="text" name="resultado" id="resultado" value="" readonly="readonly

" />
94.
95.
<input type="button" name="calcular" id="calcular" value="Calcular" />
96.
97.
</body>
98.
99. </html>
Collapse Code
json3.php:
1. <?php
2.
if( !empty($_POST) && isset($_POST['_operacion']) )
3.
4.
$resultado = $_POST['_num1'] + $_POST['_num2'];
5.
6.
7.
if( $_POST['_operacion'] == "SUMA")
echo '{ "resultado" : '.$resultado.' }';
8.
else
9.
echo '{ "resultado" : -1 }';
10.
11.
else
12.
13.
14.
15. ?>
Collapse Code
Para finalizar veamos un ltimo ejemplo en el que desde PHP se devuelve un array de objetos JSON (observa
que en esta ocasin usamos la funcin de PHP json_encode() para convertir un array a formato JSON en
lugar de devolver directamente la cadena que lo representa).
index4.php:

3.
4.
<head>
5.
<title>InformaticaPC | JSON con JQuery IV</title>
6.
7.
8.
9.
10.
11.
#resultado { background-color:lightgray;margin-top:10px; }
12.
</style>
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
// -----------------------------
25.
26.
27.
$("#cargar").click(function()
28.
29.
30.
$.ajax({
31.
async: true,
32.
type: "POST",
33.
dataType: "json",
34.
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
35.
url: "json4.php",
36.
37.
38.
timeout: 4000,
39.
error: errorEnvio
40.
});
41.
42.
43.
return false;
});
44.
45.
});
46.
47.
// -----------------------------
48.
49.
50.
51.

datos...");
52.
53.
54.
// -----------------------------
55.
56.
57.
// En caso de error
58.
59.

}
60.
61.
// -----------------------------
62.
63.
64.
function mostrarDatos( aDatos )
65.
66.
{
var html;
67.
68.
html = "<p>Se encontraron [" + aDatos.length + "] registro(s)</p>";
69.
70.
html += "<table border='1'>";
71.
html +=
72.
html +=
73.
html +=
"<th>Nombre</th>";
74.
html +=
"<th>Apellido 1</th>";
75.
html +=
"<th>Apellido 2</th>";
76.
html +=
"<th>F/Nacimiento</th>";
77.
html +=
"<th>Cuota</th>";
78.
html +=
79.
html +=
"<thead>";
"<tr>";
"</tr>";
"</thead>";
80.
81.
for( var contador=0; contador < aDatos.length; contador++ )
82.
83.
html += "<tr>";
84.
85.
html += "<td>" + aDatos[contador].nombre
86.
html += "<td>" + aDatos[contador].apellido1 + "</td>";
87.
html += "<td>" + aDatos[contador].apellido2 + "</td>";
88.
html += "<td>" + aDatos[contador].fnac
+ "</td>";
89.
html += "<td>" + aDatos[contador].cuota
+ "</td>";
90.
91.
92.
93.
html += "</tr>";
}
+ "</td>";
94.
html += "</table>";
95.
96.
$("#resultado").html( html );
97.
98.
99.
</script>
100.
</head>
101.
102.
<body>
103.
104.
105.
106.
<input type="button" name="cargar" id="cargar" value="Cargar datos" />
107.
108.
<div id="resultado"> </div>
109.
110.
</body>
111.
112.
</html>
Collapse Code
json4.php:
1. <?php
2.
$aDatos = array();
3.
4.
$aDatos[] = array( 'nombre' => 'Pedro', 'apellido1' => 'Manrique', 'apellido2' =>
'Sosa', 'fnac' => '15/02/1970', 'cuota' => 20 );
5.
$aDatos[] = array( 'nombre' => 'Raquel', 'apellido1' => 'Vera', 'apellido2' => 'D
niz', 'fnac' => '15/07/1972', 'cuota' => 22 );
6.
$aDatos[] = array( 'nombre' => 'Antonio', 'apellido1' => 'Ronda', 'apellido2' => '
Cuadrado', 'fnac' => '20/11/1974', 'cuota' => 30 );
7.
8.
// Utilizamos la funcin de PHP 'json_encode()' para convertir el array a formato

JSON antes de devolverlo
9.
echo json_encode($aDatos);
10. ?>
Collapse Code

Json

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Json

Încărcat de

Drepturi de autor:

Formate disponibile

Utilizando JSON

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

<title>InformaticaPC | JSON con JQuery I</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

// Dar el foco al recuadro del cdigo

// Al hacer clic en el botn para buscar

// Enviar la peticin mediante GET

{ _num1 : $("#num1").val(), _num2 : $("#num2").val() },

// Carga los datos recibidos en los cuadros de texto

function mostrarDatos( datos )

<label for="num1">Nmero 1:</label>

<input type="text" name="num1" id="num1" size="2" value="25" readonly="readonl

<label for="num2">Nmero 2:</label>

<input type="text" name="num2" id="num2" size="2" value="4" readonly="readonly

<input type="text" name="resultado" id="resultado" value="" readonly="readonly

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

if( !empty($_GET) && isset($_GET['_num1']) && isset($_GET['_num2']) )

// Devolver el resultado en formato JSON

echo '{ "resultado" : '.$resultado.' }';

echo "Acceso no autorizado";

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

<title>InformaticaPC | JSON con JQuery II</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

// Dar el foco al recuadro del cdigo

// Al hacer clic en el botn para buscar

var codigo = $("#codigo").val();

$("#log").text( "Cdigo a buscar: [" + codigo + "]" );

// Enviar la peticin mediante POST

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

// Antes de enviar los datos

$("#log").text("Se procesa la funcin 'antesEnvio()' antes de enviarse los

$("#log").text("Ha ocurrido un error!");

// Carga los datos recibidos en los cuadros de texto

function mostrarDatos( datos )

$("#apellidos").attr("value", datos.apellido1 + " " + datos.apellido2 );

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

<p>Introduce un cdigo del 1 al 3:</p>

<input type="text" name="codigo" id="codigo" size="2" maxlength="2" value="" />

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

<input type="text" name="nombre" id="nombre" value=""

<input type="text" name="apellidos" id="apellidos" value="" readonly="readonly" />

<input type="text" name="fnac" id="fnac" value="" readonly="readonly" size="10" />

<input type="text" name="cuota" id="cuota" value="" readonly="readonly" size

if( !empty($_POST) && isset($_POST['codigo']) )

echo '{ "nombre":"Pedro", "apellido1":"Manrique", "apellido2":"Sosa", "fnac":

echo '{ "nombre":"Raquel", "apellido1":"Vera", "apellido2":"Dniz", "fnac":"1

echo '{ "nombre":"Antonio", "apellido1":"Ronda", "apellido2":"Cuadrado", "fna

echo "Cdigo no encontrado";

echo "Acceso no autorizado";

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

<title>InformaticaPC | JSON con JQuery III</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

// Dar el foco al recuadro del cdigo

// Al hacer clic en el botn para calcular

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 peticin mediante POST

contentType: "application/x-www-form-urlencoded; charset=UTF-8