Django實戰（17）：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 %}
<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的最佳實踐。