现在我们有了一个使用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:""}}</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 item.unit_price %} </td>
</tr>
{% endfor %}
<tr>
<td></td>
<th>总计:</th>
<th>¥{{cart.total_price|floatformat:""}}</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,同时更改界面上购物车里的内容。

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

Django实战(16):Django+jquery的更多相关文章

  1. django 学习-16 Django会话Cookie

    1.django.admin.py  startproject   cs3 cd cs3 django.admin.py   startapp   blog 2.    vim urls.py url ...

  2. Django实战(一)-----用户登录与注册系统6(session会话、注册视图)

    因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的. 通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于 ...

  3. 【Python实战】Django建站笔记

    前一段时间,用Django搭建一个报表分析的网站:借此正好整理一下笔记. 1. 安装 python有包管理工具pip,直接cd Python27/Scripts,输入 pip install djan ...

  4. Django实战-用户注册和登陆系统

    1.环境搭建和创建项目 1.环境搭建 每当我们开始一个新项目的时候,通常都会搭建一个全新.独立.隔离的项目环境,这样做的好处自然不必多说.有很多种建立项目虚拟环境的工具,使用比较普遍的是Python中 ...

  5. K8S实战-构建Django项目-03-使用共享存储

    上篇博文,发布之后,正好跟着双十一,不知道大家剁手了没~~.好啦,言归正传先声明一下,每周1,3,5更新教程,大家如果想要了解更多的教程可以重温一下之前的教程或者,关注崔格拉斯 公众号,大家想要源码的 ...

  6. Django实战(二)之模板语言

    该实战教程基于菜鸟教程,菜鸟教程可参考:http://www.runoob.com/django/django-template.html 模板语法,每个框架都有其支持的模板语法,Django的模板语 ...

  7. 9、Django实战第9天:用户注册功能

    今天完成的是用户注册功能... 首先把注册页面的前端文件register.html复制到templates目录下 编辑users.views.py,创建一个注册的类 class RegisterVie ...

  8. 3/16 Django框架 环境搭建

    3/16 Django框架 环境搭建 环境搭建 Python解释器 Python代码通过Python解释器去执行. 编程语言 机器语言---汇编语言(助记符)---高级语言 解释型语言:解释器将代码一 ...

  9. 从零开始部署Django生产环境(适用:《跟老齐学Python Django实战》)

    <跟老齐学Python Django实战>作为市面上少有的Django通俗实战书籍,给了我学习Django很大的帮助.作为一名新入门的菜鸟,全书我重复练习了至少三遍,每次都有新的收获. 前 ...

  10. python框架Django实战商城项目之用户模块创建

    创建用户APP 整个项目会存在多个应用,需要存放在一个单独的文件包了,所以新建一个apps目录,管理所有子应用. 在apps包目录下穿件users应用 python ../../manage.py s ...

随机推荐

  1. 秋色园QBlog技术原理解析:性能优化篇:缓存总有失效时,构造持续的缓存方案(十四)

    转载自:http://www.cyqdata.com/qblog/article-detail-38993 文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文 ...

  2. [转]extern与头文件(*.h)的区别和联系

    用#include可以包含其他头文件中变量.函数的声明,为什么还要extern关键字? 如果我想引用一个全局变量或函数a,我只要直接在源文件中包含#include<xxx.h> (xxx. ...

  3. LintCode 35: Reverse Linked List

    LintCode 35: Reverse Linked List 题目描述 翻转一个链表. 样例 给出一个链表1->2->3->null,这个翻转后的链表为3->2->1 ...

  4. OpenCV3.4.1+vs2017安装及配置

    一.OpenCV3.4.1下载与安装 1.OpenCV3.4.1下载 可以去OpenCV官网上下载http://opencv.org/ 然后找到对应的系统环境就可以下载了,当然了官网上下载会很慢,推荐 ...

  5. 解决Maven并行编译中出现打包错误问题的思路

    解决Maven并行编译中出现打包错误问题的思路 并行构建 Maven 3.x 提供了并行编译的能力,通过执行下列命令就可以利用构建服务器的多线程/多核性能提升构建速度: mvn -T 4 clean ...

  6. Libheap:一款用于分析Glibc堆结构的GDB调试工具

    Libheap是一个用于在Linux平台上分析glibc堆结构的GDB调试脚本,使用Python语言编写.         安装 Glibc安装 尽管Libheap不要求glibc使用GDB调试支持和 ...

  7. 【Nginx】 Nginx实现端口转发

    什么是端口转发 当我们在服务器上搭建一个图书以及一个电影的应用,其中图书应用启动了 8001 端口,电影应用启动了 8002 端口.此时如果我们可以通过 localhost:8001 //图书 loc ...

  8. Floyd_Warshall算法

    Floyd_Warshall算法主要用于求解所有节点对的最短路径,代码如下: #include<iostream> using namespace std; #define Inf 655 ...

  9. 高性能.NET MVC之QMVC!

    ASP.NET!这个词代表者一个单词Fat!因为他总是捆绑着太多的太多的类,太多太多的各种功能!你也许会用到,如果你反编译或阅读他们开源的源码,你会不会犹如在大海中找不到方向?不管是Web form ...

  10. torchvision简介

    安装pytorch时,torchvision独立于torch.torchvision包由流行的数据集(torchvision.datasets).模型架构(torchvision.models)和用于 ...