首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

使用Python的Django框架结合jQuery实现AJAX购物车页面

Posted in Python onApril 11, 2016

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}}" 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)
就可以显示出如上的界面了。

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'] = cart
return 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的最佳实践。

 

 

使用Python的Django框架结合jQuery实现AJAX购物车页面

- Author -

心内求法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python实现反转部分单向链表
Sep 27 Python
使用Python做定时任务及时了解互联网动态
May 15 Python
Python 日期区间处理 (本周本月上周上月...)
Aug 08 Python
python 利用jinja2模板生成html代码实例
Oct 10 Python
python从内存地址上加载python对象过程详解
Jan 08 Python
如何学习Python time模块
Jun 03 Python
Python爬虫爬取糗事百科段子实例分享
Jul 31 Python
通俗讲解python 装饰器
Sep 07 Python
Vs Code中8个好用的python 扩展插件
Oct 12 Python
Python利用机器学习算法实现垃圾邮件的识别
Jun 28 Python
Python编程super应用场景及示例解析
Oct 05 Python
Pyhton爬虫知识之正则表达式详解
Apr 01 Python
Python的Django REST框架中的序列化及请求和返回
Apr 11 #Python
python中的错误处理
Apr 10 #Python
python脚本实现xls(xlsx)转成csv
Apr 10 #Python
Python使用gensim计算文档相似性
Apr 10 #Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
Apr 09 #Python
python调用fortran模块
Apr 08 #Python
python3使用urllib模块制作网络爬虫
Apr 08 #Python
越南购物网站(9) 北美洲购物网站(1) 秘鲁购物网站(1) 乌克兰购物网站(27) 希腊购物网站(6) 亚洲购物网站(6) 巴基斯坦购物网站(2) 缅甸购物网站(1) 匈牙利购物网站(11) 摩纳哥购物网站(1)
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
JS实现动态倒计时功能（天数、时、分、秒）
2019/12/12 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JS实现密码框效果
2020/09/10 Javascript
Android模拟器无法启动,报错：Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python文件和流(实例讲解)
2017/09/12 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python实现几种归一化方法（Normalization Method）
2019/07/31 Python
pywinauto自动化操作记事本
2019/08/26 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python字符串及文本模式方法详解
2020/09/10 Python
python opencv肤色检测的实现示例
2020/12/21 Python
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
春节超市活动方案
2014/08/14 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
详解Vue slot插槽
2021/11/20 Vue.js