集成Django和jquery
在《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。
