Categoria: Programacion Tema: Java script - Java Titulo: JSON en jQuery
Fecha del Tema: 2013-04-18 19:13:46$.getJSON La función getJSON hace una petición de datos al servidor considerando que retorna la información con notación JSON. La sintaxis de esta función es: $.getJSON([nombre de la página], [parámetros], [función que recibe los datos]) La función getJSON procede a generar un objeto en JavaScript y nosotros en la función lo procesamos. 1.El usuario hace click en un link para obtener datos. 2.JavaScript llama a un fichero PHP enviándole algunos parámetros. 3.El fichero PHP recibe los parámetros y devuelve los datos. 4.JavaScript recibe los datos y los muestra como HTML. pagina1.html <?php //esto no va <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/ 1999/xhtml"> <head> <title>Table row hovers with jQuery example - adeepersilence.be</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> <meta http-equiv="content-language" content="en" /> <style type="text/css"> body { margin: 50px 0 0 100px; } p { font-size: 0.8em; padding: 20px 0 0 0; } </style> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <ul id="mylist"> <li><a rel="3" href="#dave">Dave`s email</a></li> <li><a rel="4" href="#erik">Erik`s email</a></li> </ul> <p id="info"> </p> </body> </html> ?>//esto no va funciones.js <?php //esto no va $(`document`).ready(function(){ // an anchor element in the list `mylist` gets clicked $(`#mylist a`).click(function (){ // the ID of the record we need to retrieve is stored in the rel element, so we fetch it first var id = $(this).attr(`rel`); // do the JSON call to getinfo.php, send the ID parameter with it and allback to parseEmail $.getJSON(`getinfo.php`, {`id` : id}, parseInfo); }); }); // this function parses the fetched data into the `info` paragraph function parseInfo(data){ // the data parameter is an object, while name and email are the keys from the PHP array // you can also use the `text` function instead of html. The difference is that `text` // displays raw text, even if it contains other HTML elements. $(`#info`).html(data.name +`, `+ data.email); } ?>//esto no va getinfo.php <?php // see if we have a GET variable `id` set $id = (isset($_GET[`id`]) && !empty($_GET[`id`])) ? $_GET[`id`] : 0; // pretend this is a query to a database to fetch the wanted users. $users[3] = array(`name` => `Dave`, `email` => `dave@adeepersilence.be`); $users[4] = array(`name` => `Erik`, `email` => `erik@bauffman.be`); // only if an ID was given and the key exists in the array, we continue if(!empty($id) && key_exists($id, $users)) { // echo (not return) the wanted record from the users array echo json_encode($users[$id]); } ?> Cuando se hace click sobre cualquiera de los enlaces procedemos a realizar la petición asincrónica utilizando la función getJSON: <?php //esto no va $(`#mylist a`).click(function () { var id = $(this).attr(`rel`); $.getJSON(`getinfo.php`, {`id` : id}, parseInfo); }); ?>//esto no va Como hemos llamado a la función getJSON la misma nos retorna un objeto JavaScript para procesarlo: <?php //esto no va function parseInfo(data) { $(`#info`).html(data.name +`, `+ data.email); } ?>//esto no va Donde `data` es el objeto que devuelve getJSON. Tengamos en cuenta que el programa en el servidor debe retornar un archivo con notación JSON: <?php $id = (isset($_GET[`id`]) && !empty($_GET[`id`])) ? $_GET[`id`] : 0; $users[3] = array(`name` => `Dave`, `email` => `dave@adeepersilence.be`); $users[4] = array(`name` => `Erik`, `email` => `erik@bauffman.be`); if(!empty($id) && key_exists($id, $users)) { echo json_encode($users[$id]); } ?> [1] Note that you need PHP 5.2 or higher to use json_encode() [2] The $.getJSON() method does an HTTP GET and not POST. You need to use $.post() $.post(url, dataToBeSent, function(data, textStatus) { //data contains the JSON object //textStatus contains the status: success, error, etc }, "json"); In that call, dataToBeSent could be anything you want, although if are sending the contents of a an html form, you can use the serialize method to create the data for the POST from your form. var dataToBeSent = $("form").serialize();
$.getJSON La función getJSON hace una petición de datos al servidor considerando que retorna la información con notación JSON. La sintaxis de esta función es: $.getJSON([nombre de la página], [parámetros], [función que recibe los datos]) La función getJSON procede a generar un objeto en JavaScript y nosotros en la función lo procesamos. 1.El usuario hace click en un link para obtener datos. 2.JavaScript llama a un fichero PHP enviándole algunos parámetros. 3.El fichero PHP recibe los parámetros y devuelve los datos. 4.JavaScript recibe los datos y los muestra como HTML. pagina1.html <?php //esto no va <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/ 1999/xhtml"> <head> <title>Table row hovers with jQuery example - adeepersilence.be</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15" /> <meta http-equiv="content-language" content="en" /> <style type="text/css"> body { margin: 50px 0 0 100px; } p { font-size: 0.8em; padding: 20px 0 0 0; } </style> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <ul id="mylist"> <li><a rel="3" href="#dave">Dave`s email</a></li> <li><a rel="4" href="#erik">Erik`s email</a></li> </ul> <p id="info"> </p> </body> </html> ?>//esto no va funciones.js <?php //esto no va $(`document`).ready(function(){ // an anchor element in the list `mylist` gets clicked $(`#mylist a`).click(function (){ // the ID of the record we need to retrieve is stored in the rel element, so we fetch it first var id = $(this).attr(`rel`); // do the JSON call to getinfo.php, send the ID parameter with it and allback to parseEmail $.getJSON(`getinfo.php`, {`id` : id}, parseInfo); }); }); // this function parses the fetched data into the `info` paragraph function parseInfo(data){ // the data parameter is an object, while name and email are the keys from the PHP array // you can also use the `text` function instead of html. The difference is that `text` // displays raw text, even if it contains other HTML elements. $(`#info`).html(data.name +`, `+ data.email); } ?>//esto no va getinfo.php <?php // see if we have a GET variable `id` set $id = (isset($_GET[`id`]) && !empty($_GET[`id`])) ? $_GET[`id`] : 0; // pretend this is a query to a database to fetch the wanted users. $users[3] = array(`name` => `Dave`, `email` => `dave@adeepersilence.be`); $users[4] = array(`name` => `Erik`, `email` => `erik@bauffman.be`); // only if an ID was given and the key exists in the array, we continue if(!empty($id) && key_exists($id, $users)) { // echo (not return) the wanted record from the users array echo json_encode($users[$id]); } ?> Cuando se hace click sobre cualquiera de los enlaces procedemos a realizar la petición asincrónica utilizando la función getJSON: <?php //esto no va $(`#mylist a`).click(function () { var id = $(this).attr(`rel`); $.getJSON(`getinfo.php`, {`id` : id}, parseInfo); }); ?>//esto no va Como hemos llamado a la función getJSON la misma nos retorna un objeto JavaScript para procesarlo: <?php //esto no va function parseInfo(data) { $(`#info`).html(data.name +`, `+ data.email); } ?>//esto no va Donde `data` es el objeto que devuelve getJSON. Tengamos en cuenta que el programa en el servidor debe retornar un archivo con notación JSON: <?php $id = (isset($_GET[`id`]) && !empty($_GET[`id`])) ? $_GET[`id`] : 0; $users[3] = array(`name` => `Dave`, `email` => `dave@adeepersilence.be`); $users[4] = array(`name` => `Erik`, `email` => `erik@bauffman.be`); if(!empty($id) && key_exists($id, $users)) { echo json_encode($users[$id]); } ?> [1] Note that you need PHP 5.2 or higher to use json_encode() [2] The $.getJSON() method does an HTTP GET and not POST. You need to use $.post() $.post(url, dataToBeSent, function(data, textStatus) { //data contains the JSON object //textStatus contains the status: success, error, etc }, "json"); In that call, dataToBeSent could be anything you want, although if are sending the contents of a an html form, you can use the serialize method to create the data for the POST from your form. var dataToBeSent = $("form").serialize();
