Bienvenid@s, hoy veremos como realizar una petición ajax a datos en formato json, este tipo de formatos es una notación de objetos Javascript y su uso está muy extendido como alternativa al formato XML.
Mediante el formato json podemos crear objetos entrelazados que van formándose en el interior de un array asociativo, que posteriormente
podemos extraer mediante Ajax, por ejemplo, mediante el método getJSON de Jquery.
Este tipo de peticiones pueden hacerse a un archivo con extensión .json,
este tipo de archivos muestra su contenido en texto plano, al igual que otro cualquier archivo de texto, el cliente puede acceder a dicha información, a no ser que estes trabajando con node.js, por lo tanto,
la información que contenga un archivo .json nunca debe de comprometer la seguridad de la web.
También existe la posibilidad de hacer una petición a json a través de php, es decir, se construye el array con la información dentro de
código PHP y se codifica a formato json a través de la función json_encode.
En el siguiente ejemplo vamos a ver como crear un array de objetos en formato json, tanto en un archivo .json como en .php, este array
nos permitirá crear una tabla, incluyendo su id, cellpadding, border, el nombre de las columnas y cada una de sus filas.
Los archivos del ejercició son ...
index.html : que será el encargado de realizar la petición ajax a json
ajax.json : que contendrá la información con los datos para crear una tabla.
ajax.php : es el equivalente de ajax.json en formato .php
index.html
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<title>Como hacer una petición Ajax a json con Jquery</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
//También puedes probar a incluir una petición al equivalente ajax.php
$.getJSON( "ajax.json", function(data){
//Creamos la tabla
$("#content").html("<table id='"+data.table.id+"' cellpadding='"+data.table.cellpadding+"' border='"+data.table.border+"'></table>");
//Incluimos la fila con el nombre de las columnas
$("#"+data.table.id).append("<tr><th>"+data.table.colums[0]+"</th><th>"+data.table.colums[1]+"</th><th>"+data.table.colums[2]+"</th></tr>");
//Incluimos los datos para cada una de las filas
$.each(data.table.tr, function(index){
$("#"+data.table.id).append("<tr><td>"+data.table.tr[index][0]+"</td><td>"+data.table.tr[index][1]+"</td><td>"+data.table.tr[index][2]+"</td></tr>");
});
});
});
</script>
</head>
<body>
</body>
<div id="content"></div>
</html>
ajax.json
{"table":{
"id" : "tabla",
"cellpadding" : "10",
"border":"1",
"colums" : ["Nombre","Ciudad","País"],
"tr":[
["Pepe","Madrid","España"],
["Rodolfo","Barcelona","España"],
["Radamel","Bogotá","Colombia"],
["Fernando","Buenos Aires","Argentina"]]
}
}
ajax.php
$json = array
(
'table' => array(
'id' => 'tabla',
'cellpadding' => '10',
'border' => '1',
'colums' => array('Nombre', 'Ciudad', 'País'),
'tr' => array
(
0 => array('Pepe', 'Madrid', 'España'),
1 => array('Rodolfo', 'Barcelona', 'España'),
2 => array('Radamel', 'Bogotá', 'Colombia'),
3 => array('Fernando', 'Buenos Aires', 'Argentina')
)
)
);
echo json_encode($json);
No hay comentarios:
Publicar un comentario