My first ajax app using django and jquery

Requirement:
There is a simple form that has two input field, one is zip code and another is city. If the zip code is filled, the page will fill the city automatically by getting the relevant city of the zip code in an AJAX way.

Implementation:
1. django-admin.py startproject study
2. cd study
3. python manage.py startapp ajax
4. Edit settings.py, add 'study.ajax' to INSTALLED_APPS.
5. mkdir site_media
6. Download jquery.js from www.jquery.com and copy it to site_media
7. Add the following line to urls.py:

(r ' ^site_media/(?P<path>.*)$ ' ,  ' django.views.static.serve ' , { ' document_root ' : ' /home/sting/Django/study/site_media ' }),

  Note: We will include jquery.js in our html, for this kind of static files, django's handling is different from others. Please see http://www.djangoproject.com/documentation/static_files/ to get more detailed information.
8. cd ajax
9. mkdir templates
  Note: This folder is used to put template files. It seems that django can load template files from this folder automatically, so you needn't to configure it in settings.py.
10. Create the following html file named form.html.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< title > Register form </ title >
< script  src ="http://localhost:8000/site_media/jquery.js"  type ="text/javascript" ></ script >
< script  type ="text/javascript" >
   function  getZipData() {
     var  zipcode  =  $('#zip').val();
    $.get('http: // localhost:8000/ajax/getzipdata/' + zipcode + '/', function(data) {
      $('#city').attr({'value':data});
    });
  }
</ script >
</ head >
< body >
< table >
< form  actioon =""  method ="post" >
< tr >< td > Zip: </ td >< td >< input  id ="zip"  onblur ="getZipData()"  type ="text"  name ="zip" /></ tr >
< tr >< td > City: </ td >< td >< input  id ="city"  type ="text"  name ="city" /></ tr >
</ form >
</ table >
</ body >
</ html >

11. Edit views.py and add the following methods.

from  django.http  import  HttpResponse
from  django.core  import  serializers
from  django.shortcuts  import  render_to_response

def  getzipdata(request, zipcode):
   if  zipcode  ==   ' 214028 ' :
    city  =   ' wuxi '
   else :
    city  =   ''

   return  HttpResponse(city)

def  register(request):
   return  render_to_response( ' form.html ' , {})

12. Add the following lines to urls.py.

(r ' ^ajax/register/$ ' ,  ' study.ajax.views.register ' ),
(r ' ^ajax/getzipdata/(\d+)/$ ' ,  ' study.ajax.views.getzipdata ' ),

Visit http://localhost:8000/ajax/register/, you will see the simple form, after fill the zip code and move to city, the city will be filled automatically.

Blogged with Flock

Tags: django, jquery, ajax, python