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

<html> <head>  <meta charset="utf-8">  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>{% block title %} 标题 {% endblock %}</title>  <link href="css/djquery.css" rel="stylesheet">{% block styles %}<!--custom styles-->{% endblock %} </head> <body>  <div id="container">{% block content %}内容{% endblock %}  </div></body><script language="JavaScript" type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>{% block scripts %}<!--custom scripts-->{% endblock %}</html>

samples/hello.html

{% extends "base.html" %}{% block title %}hello, djquery! {% endblock %}{% block styles %}{% endblock %}{% block content %}<div><input type="button" id="myField" value="Click me!"/></div>{% endblock %}{% block scripts %}<script language="JavaScript" type="text/javascript" src="/static/js/djquery/hello.js"></script>{% 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.嵌入购物车界面
为了实现如下图所示的嵌入购物车的产品目录界面，我们需要做两件事情：

Python,Django框架,jQuery,AJAX

（1）修改模板：

depot/templates/depotapp/store.html:

  {% extends "base.html" %}      {% block title %} 产品目录 {% endblock %}   {% block pagename %} 产品目录 {% endblock %}      {% block content %}    <div class="row">     <div class="span10">   {% for item in products %}   <div class="row" style="padding-top:10">     <div class="span3 media-grid">       <a href="#">       <img class="thumbnail" src="{{item.image_url}}"      </a>     </div>     <div class="span6">       <h3>{{item.title}}</h3>       <br/>       {{item.description}}       <br/>       <br/>       <br/>       <div class="row">         <div class="span2"><h3>￥{{item.price|floatformat:"2"}}</h3></div>         <div class="span"><a class="btn primary" href="{% url depotapp.views.add_to_cart item.id %}">加入购物车</a></div>       </div>     </div>      </div>   <div class="page-header">   </div>   {% endfor %}     </div><!--span10-->    <div class="span4">     <h5>我的购物车</h5><br/>       <table class="condensed-table">        <tbody>        {% for item in cart.items %}         <tr>          <th>{{item.quantity}}x</th>          <td>{{item.product.title}}</td>          <td>￥{% widthratio item.quantity 1 item.unit_price %} </td>         </tr>        {% endfor %}         <tr>          <td></td>          <th>总计：</th>          <th>￥{{cart.total_price|floatformat:"2"}}</th>         </tr>        </tbody>       </table>              <a class="btn danger" href="{% url depotapp.views.clean_cart %}">清空</a>       <a class="btn success" href="#">结算</a>     </div><!--span4-->   {% 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'] = cartreturn request.session['cart'].items

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

Python,Django框架,jQuery,AJAX

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

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

{% for item in products %}<divclass="row"style="padding-top:10"><divclass="span3 media-grid"><ahref="#"><imgclass="thumbnail"src="{{item.image_url}}"alt=""></a></div><divclass="span6"><h3>{{item.title}}</h3><br/>{{item.description}}<br/><br/><br/><divclass="row"><divclass="span2"><h3>￥{{item.price|floatformat:"2"}}</h3></div><divclass="span"><aclass="btn primary"productid="{{item.id}}"href="#">加入购物车</a></div></div></div></div><divclass="page-header"></div>{% endfor %}

其中主要更改了“加入购物车”的<a>标签，增加productid属性，并将href改为“#”。这样我们就可以很方便的为其添加事件：

//store.html on ready$('a.btn[productid]').bind("click",function(){alert($(this).attr("productid"));});

这段代码实现的功能是：对于所有的标签<a>，如果class包括“btn”，并且拥有“productid”属性的元素，添加click事件，弹出对话框显示其“productid”属性值。

打开产品清单界面测试一下，能够正确弹出产品ID，然后就可以编写ajax的处理了。在这里我们使用jquery.post()方法，jquery.post()是jquery.ajax的简化写法，如下：

//store.html on ready$('a.btn[productid]').bind("click",function(){var product_id=$(this).attr("productid");//alert(product_id);$.post("/depotapp/API/cart/items/post",{product:product_id},function(data){alert(data);});});

弹出对话框显示的data就是前面定义的API接口的返回值，即现有购物车中的条目列表。

最后，要根据返回的数据更改界面上的购物车显示。这里为了方便也对html进行了改造。整个完成的depot/templates/depotapp/store.html如下：

{% extends "base.html" %}{% block title %} 产品目录 {% endblock %}{% block pagename %} 产品目录 {% endblock %}{% block content %}<divclass="row"><divclass="span10">{% for item in products %}<divclass="row"style="padding-top:10"><divclass="span3 media-grid"><ahref="#"><imgclass="thumbnail"src="{{item.image_url}}"alt=""></a></div><divclass="span6"><h3>{{item.title}}</h3><br/>{{item.description}}<br/><br/><br/><divclass="row"><divclass="span2"><h3>￥{{item.price|floatformat:"2"}}</h3></div><divclass="span"><aclass="btn primary"productid="{{item.id}}"href="#">加入购物车</a></div></div></div></div><divclass="page-header"></div>{% endfor %}</div><!--span10--><divclass="span4"><h5>我的购物车</h5><br/><tableid="tabCart"class="condensed-table"><tbodyid="items"></tbody><tfoot><tr><td></td><th>总计：</th><tdid="totalprice">￥{{cart.total_price|floatformat:"2"}}</td></tr></tfoot></table><aclass="btn danger"href="{% url depotapp.views.clean_cart %}">清空</a><aclass="btn success"href="#">结算</a></div><!--span4-->{% endblock %}{% block js %}<!--js from store.html--><script>function refreshCart(items){total = 0;var tbody = $('tbody#items')[0];tbody.innerHTML = "";for(var i=0;i<items.length;i++){total+=items[i].quantity*items[i].unit_price;$('table#tabCart').append('<tr><td>'+items[i].quantity+'x</td>'+'<td>'+items[i].product+'</td><td>￥'+items[i].unit_price+'</td></tr>');}$('#totalprice')[0].innerHTML = '$'+total;}</script>{% endblock %}{% block on_ready %}//store.html on ready$.getJSON('/depotapp/API/cart/items/',refreshCart);$('a.btn[productid]').bind("click",function(){var product_id=$(this).attr("productid");//alert(product_id);$.post("/depotapp/API/cart/items/post",{product:product_id},refreshCart);});{% endblock %}

定义了一个refreshCart函数，根据参数”重绘“购物车界面。在$(document).ready部分，首先调用前面实现的API显示购物车，这样我们在模板中就可以去掉原来实现的”购物车“，改成javascript的方式。

然后为每个”加入购物车“按钮添加点击事件，调用本节开始部分实现的接口，根据返回的最新条目数据调用refreshCart函数重绘购物车。

上面的模板中，javascript的部分划分成了两个block：{% block js %}用于嵌入具体页面（相对应父模板）的js函数；{% block on_ready %}用于嵌入具体页面的$(document).ready处理。结合base.html中定义的block，可以使组合在一起的具体页面和模板页面符合Unobtrusive JavaScript 。这样做应该是Django+jquery实现ajax的最佳实践。