Django實戰（16）：Django+jquery

dudu，這個系列的第8——18篇搬家未成功，只好手工貼過來了！

現在我們有了一個使用json格式的RESTful API，可以實現這樣的功能了：為了避免在產品列表和購物車之間來回切換，需要在產品列表界面顯示購物車，並且通過ajax的方式不刷新界面就更新購物車的顯示內容。

 

ajax框架的選擇

關於ajax框架的選擇，看圖不說話：

我不管你選的是什么，反正我是選了jquery。

在Django中使用jquery

這個實在是簡單得不能在簡單了，在depot/static下面創建js文件夾，放入jquery庫，如jquery-1.7.1.min.js。然后在模板界面中引入即可。我們假定所有的界面都使用jquery，而且希望我們能夠編寫出Unobtrusive JavaScript，所以在base.html中，在</body>之后加入如下幾行內容：

</body> 
<script src="/static/js/jquery-1.7.1.min.js"></script>  
    {% block js %}  
        <!--這里插入具體頁面引用的js庫，或者js代碼-->  
     {% endblock %}  
    <script>  
    $(function () {  
        //這里編寫base界面的on_ready代碼  
          
        {% block on_ready %}  
            //這里插入具體界面的on_ready代碼  
        {% endblock %}  
    });  
    </script>  

注：jquery的$(function(){...}) 是 $(document).ready(function(){...)) 的簡寫。

嵌入購物車界面

為了實現如下圖所示的嵌入購物車的產品目錄界面，我們需要做兩件事情：

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}}" alt="">  
            </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)

就可以顯示出如上的界面了。

 

編寫javascript實現ajax

最后一步就是通過javascript實現：點擊“加入購物車”時，調用server端的RESTful API，同時更改界面上購物車里的內容。

這部分內容，留到下一節。