在《Django实战》系列中，简单的提到了Django + jquery 实现ajax，但总感觉“意犹未尽”，很多事情都没有说清楚。所以打算专门讨论一下这个话题。ajax可以用在web应用的方方面面，所以用“什锦小菜”的方式，用几个单独的例子来说明常见的使用情况。如果你一定要问为什么是jquery而不是别的什么ajax框架，请参考这里。
根据Django官方的说法，Django没有提供内置的ajax支持，而仅仅提供了将python对象序列化（seriallize）成JSON和XML的工具，并推荐了一个库和工具。但我更倾向于使用原生的jquery，自己集成到Django中，这并不难，而且一切对你来说都是可控的。
jquery与Unobtrusive JavaScript
传统的”javascript可能是这样的：
<input type="button" id="myField" value="Click me!" onclick="alert("hello")"/>
而Unobtrusive JavaScript（低调的javascript）不建议在HTML标签中夹杂一大堆onXXX属性，去关联到Javascript事件，而是推荐让HTML与Javascript分离：
- 先加载界面显示元素，再加载javascript；
- 在Document.onReady事件中，为html元素添加事件处理器；
- 将javascript代码写在单独的js文件中。
这样的设计将界面行为从界面内容中分离出来，可以带来很多好处：
- HTML变得很容易阅读，界面设计师和界面程序员的工作也更容易衔接
- 更易于阅读的简洁的代码
- JavaScript代码集中，便于调试
- 更易于处理浏览器的不一致性
而jquery的的selector表达式使得这样的处理非常容易。下面让我们看一下Unobtrusive JavaScript的样子。
符合Unobtrusive JavaScript的html
<html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Djquery</title> <link href="css/djquery.css" rel="stylesheet"> </head> <body> <div id="container"> <div><input type="button" id="myField" value="Click me!"/></div> </div></body><script language="JavaScript" type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script language="JavaScript" type="text/javascript" src="js/djquery/hello.js"></script></html>
hello.js：
$(function () { $('#myField').bind("click",function(){ alert('hello djquery!'); });});
Django中集成jquery
首先，静态的资源通常放入static文件夹中：
static/
css/
djquery.css
samples/
hello.css
js/
jquery-1.7.1.min.js
samples/
hello.js
其中css和js都按照应用名称（这里是samples）划分文件夹，如果文件较多，还可以再划分子文件夹。
Django通常使用模板来展现html，而且我们通常使用继承的模板，所以需要将共用的元素，比如全局的css，对jquery.js的引入等，写到base模板中，而将具体页面的元素放到具体的模板中。这就牵涉到如何嵌套的问题。看下面的例子：
base.html
<html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>{% block title %} 标题 {% endblock %}</title> <link href="css/djquery.css" rel="stylesheet">{% block styles %}<!--custom styles-->{% endblock %} </head> <body> <div id="container">{% block content %}内容{% endblock %} </div></body><script language="JavaScript" type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>{% block scripts %}<!--custom scripts-->{% endblock %}</html>
samples/hello.html
{% extends "base.html" %}{% block title %}hello, djquery! {% endblock %}{% block styles %}{% endblock %}{% block content %}<div><input type="button" id="myField" value="Click me!"/></div>{% endblock %}{% block scripts %}<script language="JavaScript" type="text/javascript" src="/static/js/djquery/hello.js"></script>{% endblock %}
关于模板的继承和嵌套，可以参考这里。
Hello， Djquery！
有了上述的“框架”，我们就可以很容易的验证一下我们的想法，比如这个“Hello Djquery”。只需要在urls.py中配置一下：
(r'hello/$', 'django.views.generic.simple.direct_to_template', {'template':'samples/hello.html'}),
其中direct_to_template是django提供的一个通用视图。
获取源代码
git是非常好的版本管理工具，这个系列的源代码将在GitHub上发布为djquery，当然，需要逐步完成。现在已经完成了第一个例子，即上面的Hello，Django。
来源：https://www.cnblogs.com/holbrook/archive/2012/02/18/2357333.html