Django与Ajax教程（二）

原文地址： [url]http://www.willarson.com/blog/?p=37[/url]

 

第二部分：Django和Prototype：（动态更新内容）

 

        Ajax的一个通常用途是更新你网站页面的一部分而不必重新加载整个页面。这项功能可以使用Prototype包中的Ajax.Updater()来轻松完成。你可以从 这里获取已完成的示例源代码。

 

        Ajax.Updater的语法和目的

 

        首先，让我们先来看一下它的语法（所有的客户端编码都要用javascript完成，但如果你以前没有做过任何javascript开发也不要被吓倒，因为它非常简单）。

new Ajax.Updater(‘id_to_update’, ‘url_to_send_to’, options)

        第一个参数是你打算要更新的html元素的id.例如你可能会创建一个像这样的div:

< div id ="edit_div" > </div>

        第二个参数是你要发送消息的URL。通常它就像“edit/update/”这样，我们稍后将通过例子将它一点一点的具体化。

        第三个参数是一个包含了指定项的字典，通常你要指定它是一个异步更新（否则你的网页将被冻结，直到接收到回应，这样不太符合我们需要的用户接口特性），并且你要指定如何发送数据（尽管你不是经常用到发送数据，但如果你需要那么做，你将会用到POST）以及POST的参数。

        因此，使用Ajax.Updater的时候需要像下面的例子一样填写参数：

< script type ="text/javascript" >
function update_div() {
  new Ajax.Updater(‘my_div’, ‘/update/’, {asynchronous:true})
}
</script>

< div id ="my_div" onclick ="update_div();" >The list is empty. </div>

        这段例程将会向URL /update/ 发送一个更新请求，并且使用 /update/ 返回的html内容来替换my_div中的内容。

        现在让我们来做一个实际的例子。

 

         在Django应用中使用Ajax.Updater

        我们打算创建一个如何在Django中使用Ajax.Updater的简单示例。我们的网页在开始的时候显示一个0和一个1，在每次你单击包含着0和1的这个div的时候就会显示Fibonacci序列的下一个值（不用重新加载整个页面）。

 

        修改urls.py

        首先我们需要修改ajaxapp/urls.py文件。我们将要创建两个链接，第一个将用来显示我们的页面，第二个是用来转换更新请求的链接。你的urls.py（在ajaxproject/ajaxapp/中的那一个）要像这样修改：

from django.conf.urls.defaults import *

urlpatterns = patterns(‘ajaxproject.ajaxapp.views’,
    (r‘^$’, ‘index’),
    (r‘^refresh/$’, ‘refresh’),
)

 

        创建视图

        我们的视图文件非常简单，它将引用到一些还没有被创建的模板，但不用介意（我们将在下一步进行创建）

from django.shortcuts import render_to_response

FIB = [0,1]

def get_fib_sequence():
    global FIB
    FIB.append(FIB[-1] + FIB[-2])
    return FIB

def index(request):
    return render_to_response("ajaxapp/index.html",
                              { ‘fib_sequence’ : [0,1] }
                              )

def refresh(request):
    fib_sequence = get_fib_sequence()
    return render_to_response("ajaxapp/fib.html",
                              { ‘fib_sequence’ : fib_sequence }
                              )

        为了节省时间，我们将get_fib_sequence函数放到了视图中，这是一种不明智的做法，在实际的开发中我们会将它放到一个单独的文件中。

        我们只是在视图中简单的渲染了一下模板并把它们返回－我们没有做更多的处理。这就是Ajax.Updater美好的地方：它将简单的把所返回的任意html插入到指定位置。

 

        创建模板

        现在我们来创建在视图中被引用到的两个模板：ajaxapp/index.html和ajaxapp/fib.html。

        index.html模板相当简单，它将扩展自我们先前创建的base.html（在本系列文章的第一部分）。它包含了一些javascript，一个header和一个用来装载Fibonacci序列的div（它将被fib.html模板渲染）。ajaxapp/index.html模板就像这样：

{% extends ‘ajaxapp/base.html’ %}

{% block content %}

< script type ="text/javascript" >
function update_fib() {
  new Ajax.Updater(’fib_div’, ‘refresh/’, {asynchronous:true});
}
</script>

< h1 > The Fibonacci Sequence </h1>
< div id ="fib_div" onclick ="update_fib();" >
  {% include ‘ajaxapp/fib.html’ %}
</div>
{% endblock %}

        我们来创建ajaxapp/fib.html模板：

< ul >
  {% for entry in fib_sequence %}
   < li >{{ entry }} </li>
  {% endfor %}
</ul>

        再次看来这是一个相当简单的模板。你将发现在Django中你做更多的Ajax时，创建小助手模板真的能使你的生活更轻松。记住，这是一个好的模式。

 

        结束

        OK，现在我们写完了模板，就全部完成啦。启动起来开发服务器：

python manage.py runserver

        然后你就到网页这里，在0和1的地方点击来查看它的运行结果。

        当你准备好的时候你就可以继续本教程 下一部分的学习了。下一部分将说明在不离开当前页面的情况下使用Ajax.Request发送数据或命给Django。