User:Jonas Lund/jQueryAjax
How to do Simple Ajax Request with jQuery
An easy way of sending a python script data (from an html file) and retrieving a result, is by using jQuery's Ajax function, to send an asynchronous request to the python script and process what the script outputs.
A simple jQuery ajax requests looks like this
$.ajax({
//What Type Of Request (GET or POST)
type: 'POST',
//The Data you send to the script
data: {name: val},
//Url of script
url: 'http://yourdomain.com/python.py',
//success function, when the request has successfully completed
//the data is the variable in which the returned output from the python script is stored
success: function(data) {
}
});
There's a lot more you can do, have a look here for the full documentation. http://api.jquery.com/category/ajax/
So, let's look at some real examples of using this together with a python script.
We'll be using the Image Merger as an example.
Here's our index.html, contains our form which we'll use for user input. We send the input from the form to the python script, and then get some data back, in this case a url to an image, which we prepend to the body, by creating a new img element and setting the src to the returned data.
<!doctype html>
<!-- check for IE browsers to make it easier to target with css -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Image Merger</title>
<meta name="description" content="Image Merger">
<meta name="author" content="Image Merger">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body, html {width: 100%;}
html {margin: 0; padding: 0;}
body {font: 14px/1.3 sans-serif; color: #333;}
#search-form {position: absolute; top: 20px; right: 20px; width: 300px;}
#loader {display: none; position: fixed; top: 20px; left: 0; text-align: center;}
img {margin: 20px;}
#results {text-align: center; width: 100%;}
</style>
</head>
<body>
<!-- Loading Icon -->
<div id="loader">
<img src="http://pzwart3.wdka.hro.nl/~jlund/imger/loader.gif"/>
</div>
<!-- Our Search Form -->
<div id="search-form" role="main">
<form action="http://pzwart3.wdka.hro.nl/~jlund/cgi-bin/imger.py" method="POST" id="search">
<label for="query">Search for...</label>
<input type="text" name="query" id="query" />
<input type="submit" name="submit" value="Go!">
</form>
</div>
<!-- Container for our results -->
<div id="results">
</div>
<!-- Get jQuery from Google CDN, at the bottom -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- If it fails, load the local version -->
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.min.js"><\/script>')</script>
<script src="script.js"></script>
</body>
</html>
Our script.js to capture the form submit event and send the ajax request.
//Note, since the script.js is loaded at the bottom of the page,
//We don't need to use the jQuery dom-ready function.
//When an Ajax Request is started, show the loading icon
$("#loader").ajaxStart(function() {
$(this).show();
});
$("#search").submit(function() {
//get the value from the text input field in the form
var formVal = $("#query").val();
//Ajax Request
$.ajax({
type: "POST",
data: {query: formVal},
url : 'http://pzwart3.wdka.hro.nl/~jlund/cgi-bin/imger.py',
success : function(data) {
//hide the loader
$("#loader").hide();
//Check if data is not empty
if(data) {
//Prepend a new img tag and use the returned data as src
$("<img/>", {
src: data
}).prependTo($("#results"));
}
}
});
//Prevent default behaviour or form, if not it would go to the url of the form.
return false;
});
This is the easiest way of sending one value, and getting one value back, and do then something with it, but what if you want to return more than one value?
jQuery has a pretty handy function for parsing JSON, so let's take a look on how that works.
//Ajax Request
$.ajax({
type: "POST",
data: {name: value},
url : '',
success : function(data) {
//parse our data in to a JSON-object
var obj = $.parseJSON(data);
//now we can access the data returned like this
var value1 = obj.value1;
//to iterate through it all (if you return array(1 => array(), 2 => array())) etc
$.each(obj, function(i, object) {
var value1 = obj.value1;
});
}
});
To make nicely formatted json return results in python you can do it like this (as soon on here http://docs.python.org/library/json.html)
>>> import json
#outputs your data as json encoded
>>> json.dumps(['foo', {'bar': ('baz', None, 1.0, 2)}])
'["foo", {"bar": ["baz", null, 1.0, 2]}]'