使用Python的Django框架结合jQuery实现AJAX购物车页面
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
{% 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调试是非常方便的办法):
如同你看到的那样,我们的接口定义不是完全RESTful,在生成的表单中,我们只需要选择Product,不用管另外的两个表单项,POST之后就可以从之前实现的购物车界面中看到新增加的产品项了。
服务接口测试通过,就可以在界面中通过ajax调用了。jquery对ajax提供了丰富的支持,为了方便使用jquery的selector,先要对html进行改造。将上面实现的depot/templates/depotapp/store.html中,迭代产品的部分改成如下的样子:
{% for item in products %}