热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

Django中集成jquery首先,静态的资源通常放入static文件夹中:staticcssdjquery.csssampleshello.cssjs

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

{% block title %} 标题 {% endblock %}

{% block styles %}{% endblock %}

{% block content %}内容{% 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, Djquery!有了上述的“框架”,我们就可以很容易的验证一下我们的想法,比如这个“Hello Djquery”。只需要在urls.py中配置一下:

(r'hello/$', 'django.views.generic.simple.direct_to_template', {'template':'samples/hello.html'}),

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

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

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

ad88294dfef4017a6b472be07d3deb3f.png

(1)修改模板:

depot/templates/depotapp/store.html:

{% extends "base.html" %}

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

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

{% block content %}

{% for item in products %}

{{item.title}}

{{item.description}}

¥{{item.price|floatformat:"2"}}

加入购物车

{% endfor %}

我的购物车

{% for item in cart.items %}

{{item.quantity}}x{{item.product.title}}¥{% widthratio item.quantity 1 item.unit_price %}

{% endfor %}

总计:¥{{cart.total_price|floatformat:"2"}}

清空

结算

{% endblock %}

(2)在depotapp/views.py中的store_view视图函数中增加一行:

cart = request.session.get("cart",None)

就可以显示出如上的界面了。

2.编写Javascript实现ajax现在让我们来通过ajax请求后台服务。当然首选要实现后台服务。关于“加入购物车”,我们需要的服务是这样定义的:

url:    http://localhost:8000/depotapp/API/cart/items/post

post数据: product = product_id

处理过程: 根据product_id,将product加入购物车

返回:购物车中的所有条目

这个API的定义似乎不那么RESTful,但是暂且不去管它。实现这个服务需要为RESTful web service(depotapp/views.py中的RESTforCart类)增加一个方法:

def post(self, request, *args, **kwargs):

print request.POST['product']

product = Product.objects.get(id=request.POST['product'])

cart = request.session['cart']

cart.add_product(product)

request.session['cart'] = cart

return request.session['cart'].items

可以通过http://localhost:8000/depotapp/API/cart/items/post来测试服务接口(使用Firebug调试是非常方便的办法):

e2a99308da4ee73b63907b05ba208fc0.png

如同你看到的那样,我们的接口定义不是完全RESTful,在生成的表单中,我们只需要选择Product,不用管另外的两个表单项,POST之后就可以从之前实现的购物车界面中看到新增加的产品项了。

服务接口测试通过,就可以在界面中通过ajax调用了。jquery对ajax提供了丰富的支持,为了方便使用jquery的selector,先要对html进行改造。将上面实现的depot/templates/depotapp/store.html中,迭代产品的部分改成如下的样子:

{% for item in products %}

{{item.title}}

{{item.description}}

¥{{item.price|floatformat:"2"}}




推荐阅读
author-avatar
玉米猴子_794
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有