Django默认模版添加ajax,使用Python的Django框架结合jQuery实现AJAX购物车页面

Django中集成jquery首先&＃xff0c;静态的资源通常放入static文件夹中&＃xff1a;

static/

css/

djquery.css

samples/

hello.css

js/

jquery-1.7.1.min.js

samples/

hello.js

其中css和js都按照应用名称(这里是samples)划分文件夹&＃xff0c;如果文件较多&＃xff0c;还可以再划分子文件夹。

Django通常使用模板来展现html&＃xff0c;而且我们通常使用继承的模板&＃xff0c;所以需要将共用的元素&＃xff0c;比如全局的css&＃xff0c;对jquery.js的引入等&＃xff0c;写到base模板中&＃xff0c;而将具体页面的元素放到具体的模板中。这就牵涉到如何嵌套的问题。看下面的例子&＃xff1a;

base.html

{% block styles %}{% endblock %}

{% block scripts %}

{% endblock %}

samples/hello.html

{% extends "base.html" %}

{% block title %}

hello, djquery!

{% endblock %}

{% block styles %}

{% endblock %}

{% block content %}

{% endblock %}

{% block scripts %}

{% endblock %}

Hello&＃xff0c; Djquery&＃xff01;有了上述的“框架”&＃xff0c;我们就可以很容易的验证一下我们的想法&＃xff0c;比如这个“Hello Djquery”。只需要在urls.py中配置一下&＃xff1a;

(r&＃39;hello/$&＃39;, &＃39;django.views.generic.simple.direct_to_template&＃39;, {&＃39;template&＃39;:&＃39;samples/hello.html&＃39;}),

其中direct_to_template是django提供的一个通用视图。

AJAX实现示例我们来看一个购物车的例子。假设现在我们有一个使用json格式的RESTful API&＃xff0c;可以实现这样的功能了&＃xff1a;为了避免在产品列表和购物车之间来回切换&＃xff0c;需要在产品列表界面显示购物车&＃xff0c;并且通过ajax的方式不刷新界面就更新购物车的显示内容&＃xff0c;利用我们上面在Django中集成的jQuery。

1.嵌入购物车界面为了实现如下图所示的嵌入购物车的产品目录界面&＃xff0c;我们需要做两件事情&＃xff1a;

(1)修改模板&＃xff1a;

depot/templates/depotapp/store.html:

{% extends "base.html" %}

{% block title %} 产品目录 {% endblock %}

{% block pagename %} 产品目录 {% endblock %}

{% block content %}

{{item.title}}

{{item.description}}

&＃xffe5;{{item.price|floatformat:"2"}}