This is just a little tips to demonstrate how to use the python bottle micro framework to render a page template which send a js async request (ajax), get the result in a json form and display it.

First create this bottle main file, for example main.py, this will respond onto localhost:8080 as described in the bottle manual.

The first route 'localhost:8080/' will render the template json.tpl file which will see later, the second route 'localhost:8080/getallitems' will send to the browser the json converted dictionary.

#!/usr/bin/env python from bottle import route , run , template , get , debug debug ( True ) # this will be the dictionary returned by the ajax call. # Bottle convert this in a json compatibile string. items = { 1 : 'first item' , 2 : 'second item' } # a simple json test main page @route ( '/' ) def jsontest (): return template ( 'json' ) @route ( '/getallitems.json' ) def shop_aj_getallitems (): return ( items ) run ( host = 'localhost' , port = 8080 ) # vim: tabstop=8 expandtab shiftwidth=4 softtabstop=4

The json.tpl template file looks like this:

< html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < script type = "text/javascript" > var xmlhttp ; // Are we using a modern browser or ... if ( window . XMLHttpRequest ) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest (); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP" ); } // This will render the two output which substitute the // elements id="raw" and id="forin" function GetItems () { if ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { // var jsonobj = eval ("(" + xmlhttp.responseText + ")"); var jsonobj = JSON . parse ( xmlhttp . responseText ); var output = xmlhttp . responseText ; document . getElementById ( "raw" ). innerHTML = output ; output = "" ; for ( i in jsonobj ) { output += '<p>' ; output += i + " : " + jsonobj [ i ]; output += '</p>' ; } document . getElementById ( "forin" ). innerHTML = output ; } else { alert ( "data not available" ); } } // xmlhttp.onreadystatechange = GetArticles; // the GetItems function will be triggered once the ajax // request is terminated. xmlhttp . onload = GetItems ; // send the request in an async way xmlhttp . open ( "GET" , "/getallitems.json" , true ); xmlhttp . send (); </ script > </ head > < body > < p > The raw result from the ajax json request is :</ p > < div id = "raw" ></ div > < br /> < p > The for cycle produces :</ p > < div id = "forin" ></ div > </ body > </ html >

Run the program with:

python main.py

open the URL on http://localhost:8080

The raw result from the ajax json request is: {"1": "first item", "2": "second item"} The for cycle produces : 1 : first item 2 : second item

-> Send a comment: Unless requested otherwise I may add it, or some extract, to this page.