在《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。