Webpy Comunicación en AJAX con JSON

En el how-to anterior vimos un pequño abre vocas de cómo se pueden realizar comunicaciones con AJAX en Web.py y que herramientas nos proporciona Python para tal fin.

En este post trataremos la comunicación en AJAX pero con la alternativa al envío de datos en JSON.

Web.py, python y JSON.

1. Creo que ya debemos tener nuestra tabla de países:

myweb=# SELECT * FROM pais;
id | codigo  |                     descrip                      | ubicacion
-----+--------+-------------------------------------------------+-----------
1  | 013     | AFGANISTAN                                       |
2  | 017     | ALBANIA                                          |
3  | 023     | ALEMANIA                                         |
4  | 026     | ARMENIA                                          |

2. Creemos el fichero para nuestro aplicativo. El cual retornará una salida en JSON:

 1 #!/usr/bin/env python
 2 # -*- coding: UTF-8 -*-
 3
 4 import web
 5 import json
 6
 7
 8 dB = web.database(dbn='postgres', user='postgres', pw='qwerty', db='myweb')
 9
 10 urls = (
 11             '/', 'root'
 12         )
 13
 14 app = web.application(urls, globals())
 15
 16
 17 class root:
 18
 19     def GET(self):
 20         paises = dB.select('pais')
 21         web.header('content-Type', 'application/json')
 22         return json.dumps([row for row in paises])
 23
 24
 25
 26 if __name__ == "__main__": app.run()

Simple no!, miremos qué nos muestra nuestro app cuando lo ejecutamos.

$ python app.py

Para los más curiosos creo que habrán notado que esto nos muestra todos los países. Y esto por qué? a diferencia de los que pasa con XML, la salida en JSON se muestra como una cadena de texto, no como un objeto.

AJAX

Ahora solo es cuestión de crear una página para que reciba los datos enviados desde el CGI en formato JSON.

1. Plantilla:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Consulata Paises</title>
 5     <script>
 6        var READY_STATE_COMPLETE = 4;
 7
 8        function cargarJSON(){
 9            var req = new XMLHttpRequest();
 10
 11             if(req){
 12                 req.onreadystatechange = handlerRequest;
 13                 req.open("GET", "/paises", true);
 14                 req.send(null);
 15             }
 16
 17             function handlerRequest(){
 18                 if(req.readyState == READY_STATE_COMPLETE){
 19                     if(req.status == 200){
 20                         var respuestaJSON = req.responseText;
 21                         var objetoJSON = eval("(" + respuestaJSON + ")");
 22
 23                         var salida = document.getElementById('salida');
 24                         var table = "<table>";
 25                         for(i in objetoJSON){
 26                             table += '<tr>';
 27                             table += '<td>'+ objetoJSON[i].codigo + '<\/td>';
 28                             table += '<td>'+ objetoJSON[i].descrip + '<\/td>';
 29                             table += '<\/tr>';
 30                         }
 31                         table += '<\/table>';
 32                         salida.innerHTML = table;
 33                     }
 34                 }
 35             }
 36
 37        }
 38
 39        window.onload = function(){
 40            document.getElementById('boton').onclick = cargarJSON;
 41        }
 42
 43     </script>
 44 </head>
 45 <body>
 46     <div>
 47         <button type="button" id="boton">Obtener Paises</button>
 48     </div>
 49     <div id="salida"></div>
 50 <body>
 51 </html>

2. Modificamos nuestro App:

 1 #!/usr/bin/env python
 2 # -*- coding: UTF-8 -*-
 3
 4 import web
 5 import json
 6
 7 plantilla = web.template.render('./')
 8
 9 dB = web.database(dbn='postgres', user='postgres', pw='qwerty', db='myweb')
 10
 11 urls = (
 12             '/', 'root',
 13             '/paises', 'paises'
 14         )
 15
 16 app = web.application(urls, globals())
 17
 18
 19 class root:
 20
 21     def GET(self):
 22         return plantilla.index()
 23
 24 class paises:
 25     def GET(self):
 26         paises = dB.select('pais')
 27         web.header('content-Type', 'application/json')
 28         return json.dumps([row for row in paises])
 29
 30
 31
 32 if __name__ == "__main__": app.run()

Listo, ejecutamos nuestro App, para obtener nuestros países.

$ python app.py

Con esto podemos ver lo fácil que es usar AJAX con JSON en Web.py.

Autor: Jolth

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s