使用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

 
  
  
  
  
{% 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.嵌入购物车界面
为了实现如下图所示的嵌入购物车的产品目录界面，我们需要做两件事情：

（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 %} 
         
       {% endfor %} 
        
 
       
 
         
{{item.quantity}}x
 
         
{{item.product.title}}
 
         
￥{% widthratio item.quantity 1 item.unit_price %} 
 
        
 
         
 
         
总计：
 
         
￥{{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 %}