Django实战（16）：Django+jquery

现在我们有了一个使用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，同时更改界面上购物车里的内容。

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