Django+jquery 什锦(1):集成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分离:
  1. 先加载界面显示元素,再加载javascript;
  2. 在Document.onReady事件中,为html元素添加事件处理器;
  3. 将javascript代码写在单独的js文件中。

这样的设计将界面行为从界面内容中分离出来,可以带来很多好处:

  1. HTML变得很容易阅读,界面设计师和界面程序员的工作也更容易衔接
  2. 更易于阅读的简洁的代码
  3. JavaScript代码集中,便于调试
  4. 更易于处理浏览器的不一致性

而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。

没有更多推荐了,返回首页