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
分享到：
相关推荐
Django JavaScript Integration AJAX and jQuery 英文原版
英文版教程，介绍了AJAX与Django框架的整合方案
Django JavaScript Integration AJAX and jQuery 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有...
Django JavaScript Integration - AJAX and jQuery 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如...
Django JavaScript Integration Ajax and jQuery
Django JavaScript Integration AJAX and jQuery.pdf
django ajax异步请求Django的Ajax库3813428.zip
准备开发webIM，今天用django+jquery做了一个测试
第一次用 django + jquery，的确很容易,django作为空闲时间玩玩，不需费太大的精力
ztree ajax异步调用，使用django作为服务端，可正常运行。开启服务(项目根目录下，与manange.py同级， 执行python manage.py runserver开启服务)，浏览器输入地址http://127.0.0.1:8000/ztree/standar/即可
NULL 博文链接：https://liuyouqian.iteye.com/blog/1211729
Packt.Django.JavaScript.Integration.AJAX.and.jQuery
好书看看名字就知道了，真的好书还是老外写的，看了收获良多，有相见恨晚之感。
AJAX and Django 306 MochiKit 306 Django Serialization for AJAX 307 AJAX-ified Blog Example 311 Django Add-Ons 320 django.contrib Add-Ons 320 Other Add-Ons 321 RSS in Detail 321 Deploying ...
项目概述：本项目是基于Python中流行的Django框架，结合jQuery AJAX技术实现的前后端交互应用。通过使用POST和GET请求，实现了数据的异步处理。项目主要采用Python语言编写，同时包含了JavaScript、HTML、Shell、CSS...
Django-jQuery-File-Uploader-Integration-demo-master.zip
Ajax-django-ajax.zip,django应用程序的快速而简单的ajax库。包含ajax decorator、ajax中间件、快捷方式等。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于...