使用Python的Django框架結(jié)合jQuery實(shí)現(xiàn)AJAX購(gòu)物車(chē)頁(yè)面

更新時(shí)間：2016年04月11日 15:52:27 作者：心內(nèi)求法

這篇文章主要介紹了使用Python的Django框架結(jié)合jQuery實(shí)現(xiàn)AJAX購(gòu)物車(chē)頁(yè)面的方法,示例基于Django中構(gòu)建好的JSON格式的RESTful API需要的朋友可以參考下

Django中集成jquery
首先，靜態(tài)的資源通常放入static文件夾中：

static/
  css/
    djquery.css
    samples/
      hello.css
  js/
    jquery-1.7.1.min.js
    samples/
      hello.js

其中css和js都按照應(yīng)用名稱(chēng)（這里是samples）劃分文件夾，如果文件較多，還可以再劃分子文件夾。

Django通常使用模板來(lái)展現(xiàn)html，而且我們通常使用繼承的模板，所以需要將共用的元素，比如全局的css，對(duì)jquery.js的引入等，寫(xiě)到base模板中，而將具體頁(yè)面的元素放到具體的模板中。這就牽涉到如何嵌套的問(wèn)題?？聪旅娴睦樱?br /> base.html

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>{% block title %} 標(biāo)題 {% endblock %}</title>
  <link href="css/djquery.css" rel="stylesheet">
{% block styles %}<!--custom styles-->{% endblock %}
 </head>
 <body>
  <div id="container">
{% block content %}內(nèi)容{% 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！
有了上述的“框架”，我們就可以很容易的驗(yàn)證一下我們的想法，比如這個(gè)“Hello Djquery”。只需要在urls.py中配置一下：

復(fù)制代碼代碼如下:

(r'hello/$', 'django.views.generic.simple.direct_to_template', {'template':'samples/hello.html'}),

其中direct_to_template是django提供的一個(gè)通用視圖。

AJAX實(shí)現(xiàn)示例
我們來(lái)看一個(gè)購(gòu)物車(chē)的例子。假設(shè)現(xiàn)在我們有一個(gè)使用json格式的RESTful API，可以實(shí)現(xiàn)這樣的功能了：為了避免在產(chǎn)品列表和購(gòu)物車(chē)之間來(lái)回切換，需要在產(chǎn)品列表界面顯示購(gòu)物車(chē)，并且通過(guò)ajax的方式不刷新界面就更新購(gòu)物車(chē)的顯示內(nèi)容，利用我們上面在Django中集成的jQuery。
1.嵌入購(gòu)物車(chē)界面
為了實(shí)現(xiàn)如下圖所示的嵌入購(gòu)物車(chē)的產(chǎn)品目錄界面，我們需要做兩件事情：

2016411154755165.jpg (922×558)

（1）修改模板：

depot/templates/depotapp/store.html:

  {% extends "base.html" %} 
   
  {% block title %} 產(chǎn)品目錄 {% endblock %} 
  {% block pagename %} 產(chǎn)品目錄 {% 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 %}">加入購(gòu)物車(chē)</a></div> 
      </div> 
    </div> 
   
  </div> 
  <div class="page-header"> 
  </div> 
  {% endfor %} 
    </div><!--span10--> 
   <div class="span4"> 
    <h5>我的購(gòu)物車(chē)</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>總計(jì)：</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="#">結(jié)算</a> 
    </div><!--span4--> 
  {% endblock %}

（2）在depotapp/views.py中的store_view視圖函數(shù)中增加一行：

cart = request.session.get("cart",None)
就可以顯示出如上的界面了。

2.編寫(xiě)javascript實(shí)現(xiàn)ajax
現(xiàn)在讓我們來(lái)通過(guò)ajax請(qǐng)求后臺(tái)服務(wù)。當(dāng)然首選要實(shí)現(xiàn)后臺(tái)服務(wù)。關(guān)于“加入購(gòu)物車(chē)”，我們需要的服務(wù)是這樣定義的：

url: http://localhost:8000/depotapp/API/cart/items/post
post數(shù)據(jù): product = product_id
處理過(guò)程: 根據(jù)product_id，將product加入購(gòu)物車(chē)
返回：購(gòu)物車(chē)中的所有條目
這個(gè)API的定義似乎不那么RESTful，但是暫且不去管它。實(shí)現(xiàn)這個(gè)服務(wù)需要為RESTful web service（depotapp/views.py中的RESTforCart類(lèi)）增加一個(gè)方法：

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

可以通過(guò)http://localhost:8000/depotapp/API/cart/items/post來(lái)測(cè)試服務(wù)接口（使用Firebug調(diào)試是非常方便的辦法）：

2016411154839671.jpg (788×571)

如同你看到的那樣，我們的接口定義不是完全RESTful，在生成的表單中，我們只需要選擇Product，不用管另外的兩個(gè)表單項(xiàng)，POST之后就可以從之前實(shí)現(xiàn)的購(gòu)物車(chē)界面中看到新增加的產(chǎn)品項(xiàng)了。

服務(wù)接口測(cè)試通過(guò)，就可以在界面中通過(guò)ajax調(diào)用了。jquery對(duì)ajax提供了豐富的支持，為了方便使用jquery的selector，先要對(duì)html進(jìn)行改造。將上面實(shí)現(xiàn)的depot/templates/depotapp/store.html中，迭代產(chǎn)品的部分改成如下的樣子：

{% 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="#">加入購(gòu)物車(chē)</a></div>
</div>
</div>
</div>
<divclass="page-header">
</div>
{% endfor %}

其中主要更改了“加入購(gòu)物車(chē)”的<a>標(biāo)簽，增加productid屬性，并將href改為“#”。這樣我們就可以很方便的為其添加事件：

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

這段代碼實(shí)現(xiàn)的功能是：對(duì)于所有的標(biāo)簽<a>，如果class包括“btn”，并且擁有“productid”屬性的元素，添加click事件，彈出對(duì)話框顯示其“productid”屬性值。

打開(kāi)產(chǎn)品清單界面測(cè)試一下，能夠正確彈出產(chǎn)品ID，然后就可以編寫(xiě)ajax的處理了。在這里我們使用jquery.post()方法，jquery.post()是jquery.ajax的簡(jiǎn)化寫(xiě)法，如下：

//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);
}
);
}
);

彈出對(duì)話框顯示的data就是前面定義的API接口的返回值，即現(xiàn)有購(gòu)物車(chē)中的條目列表。

最后，要根據(jù)返回的數(shù)據(jù)更改界面上的購(gòu)物車(chē)顯示。這里為了方便也對(duì)html進(jìn)行了改造。整個(gè)完成的depot/templates/depotapp/store.html如下：

{% extends "base.html" %}
{% block title %} 產(chǎn)品目錄 {% endblock %}
{% block pagename %} 產(chǎn)品目錄 {% 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="#">加入購(gòu)物車(chē)</a></div>
</div>
</div>
</div>
<divclass="page-header">
</div>
{% endfor %}
</div><!--span10-->
<divclass="span4">
<h5>我的購(gòu)物車(chē)</h5><br/>
<tableid="tabCart"class="condensed-table">
<tbodyid="items">
</tbody>
<tfoot>
<tr>
<td></td>
<th>總計(jì)：</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="#">結(jié)算</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 %}

定義了一個(gè)refreshCart函數(shù)，根據(jù)參數(shù)”重繪“購(gòu)物車(chē)界面。在$(document).ready部分，首先調(diào)用前面實(shí)現(xiàn)的API顯示購(gòu)物車(chē)，這樣我們?cè)谀０逯芯涂梢匀サ粼瓉?lái)實(shí)現(xiàn)的”購(gòu)物車(chē)“，改成javascript的方式。

然后為每個(gè)”加入購(gòu)物車(chē)“按鈕添加點(diǎn)擊事件，調(diào)用本節(jié)開(kāi)始部分實(shí)現(xiàn)的接口，根據(jù)返回的最新條目數(shù)據(jù)調(diào)用refreshCart函數(shù)重繪購(gòu)物車(chē)。

上面的模板中，javascript的部分劃分成了兩個(gè)block：{% block js %}用于嵌入具體頁(yè)面（相對(duì)應(yīng)父模板）的js函數(shù)；{% block on_ready %}用于嵌入具體頁(yè)面的$(document).ready處理。結(jié)合base.html中定義的block，可以使組合在一起的具體頁(yè)面和模板頁(yè)面符合Unobtrusive JavaScript 。這樣做應(yīng)該是Django+jquery實(shí)現(xiàn)ajax的最佳實(shí)踐。

您可能感興趣的文章: