Django与Ajax教程第二部分

发布时间:2020-11-30编辑:脚本学堂
本文介绍下,python中Django与Ajax教程的第二部分的内容,包括Django和Prototype:动态更新内容、创建视图等操作,感兴趣的朋友参考下。

本节内容:
Django与Ajax教程

第二部分: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时,创建小助手模板真的能使你的生活更轻松。

写完了模板,就全部完成啦。启动起来开发服务器
 

复制代码 代码示例:
python manage.py runserver

然后到网页中,在0和1的地方点击来查看它的运行结果。