My first ajax app using django and jquery

stingh711

浏览: 126189 次
性别:
来自: 无锡

最近访客更多访客>>

shuiyunbing

InJavaWeTrust

nhmddh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Django Ajax jQuery Python JavaScript

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

分享到：

Asus Eee Pc,看起来很不错 | Sentence by sentence(5)

2007-11-16 14:48
浏览 2480
评论(2)
查看更多

2 楼 stingh711 2008-08-18

static file本来就是用的绝对路径:)

1 楼 supercode 2008-07-13

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

document_root好像要用绝对路径，相对路径好像没有效果

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论