Django实战(16):Django+jquery

32 篇文章 1 订阅
14 篇文章 0 订阅

已经开通了Django专栏,本系列的文章会持续加入。

现在我们有了一个使用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>之前加入如下几行内容:

    <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>
  </body>
注: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中的 view_cart store_view视图函数中增加一行:

cart = request.session.get("cart",None)

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


编写javascript实现ajax

最后一步就是通过javascript实现:点击“加入购物车”时,调用server端的RESTful API,同时更改界面上购物车里的内容。

这部分内容,留到下一节。


  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值