Web Dynamism w/Python+jQuery - Part 1 April 16th, 2008
Having a static, standards compliant, flat-file website isn't a bad thing. But sometimes it's nice to inject a little bit of life into a page or two. Not only can it help keep things interesting but it might substantially increase usability as well.
- A webserver which allows you to execute CGI scripts (we'll use Python CGI, to be exact, although you could potentially use any language you're familiar with).
- Access to an SMTP server for actually sending the email out (this can likely be done with your regular email account).
- A Python interpreter.
If you're running your own server then you'll likely need to do some
configuration (generally it comes down to adding a line like
AddHandler cgi-script .py to your Apache
file, for other webservers and platforms, ask Google). Otherwise, this
stuff is probably already done for you, consult the documentation for
your web host for the correct location to put CGI files.
So let's invent an example and see what happens.
Maybe we want a little contact form on your site which a visitor could use to send you an email. This could be handy for several reasons:
- These days the email harvesters are running rampant on the internet, a contact form like this might make displaying your address unnecessary.
- The visitor wont need to interrupt their browsing, no need for copy/pasting the address or opening up a separate window or program to send you an email.
- We could include fields for information the user might mistakenly forget to supply us in a regular email (depending on the purpose of the form).
Let's start by writing the form. Let's say we'd like the visitor's name, their email address (so we can reply, but this will be optional), a drop-down to select what the comment is regarding, and the comment itself.
name= fields here are how we'll access these values once
we get to the CGI side. This is a pretty typical form with the only
interesting part being
The actual path may be different depending on your hosting, so adjust
accordingly. Of course there is no
yet! So let's write it right now.
The Python CGI
So at this point we should already have it working. If you throw the form into a page, have the paths setup correct and so on, and press submit -- you'll get a new page with the result, and the URL will be that of your actual Python script. Refreshing will attempt to submit the same data again (aka, it will send another email).
The next step is to make it dynamic. Since we don't want to actually go to the Python script, we just want it to do some work and give us a result asynchronously. Fortunately this last step is the easiest part. All we need to do is have jQuery send the form for us, instead of the browser.
This code fades out the form itself, gets the data and the URL of our
Python CGI, then it does the
POSTing asynchronously and
div in the page with the message.
enabled they still get the original behavior! This is because we
script sees the
async parameter then it will assume we're
text/plain type. Which we then capture in the
success: function and push onto the page.
If you're having trouble you can take a look at
Demo is now offline.
of this in action, spruced up a (very tiny) bit with a 'progress bar'.
In the example I've artificially increased the time it takes for Python to do it's work. If you're doing a very small amount of work (in the case of the example, I'm not really sending an email at all), the result will seem to appear instantly, which doesn't look as cool in the example.
The best thing about this example is that is demonstrates how you might actually use Python and jQuery to make a real website more dynamic. Not all 'Web 2.0' or 'AJAX' functionality is entirely superfluous.
More articles showing off Python+jQuery coming soon!
Some social stuff: