使用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 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.嵌入購物車介面
為了實現如所示的嵌入購物車的產品目錄介面，我們需要做兩件事情：

（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'] = cartreturn 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 %}
{{item.title}}

{{item.description}}


￥{{item.price|floatformat:"2"}}
加入購物車{% endfor %}

其中主要更改了“加入購物車”的標籤，增加productid屬性，並將href改為“#”。這樣我們就可以很方便的為其添加事件：

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

這段代碼實現的功能是：對於所有的標籤，如果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 %}{% for item in products %}
{{item.title}}

{{item.description}}


￥{{item.price|floatformat:"2"}}
加入購物車{% endfor %}
我的購物車

總計：￥{{cart.total_price|floatformat:"2"}}清空結算{% endblock %}{% block js %}{% 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的最佳實務。

