Python bottle and ajax
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