django项目中使用jquery操作购物车页面

最终结果如图：

（1）使用js实现了全选、全不选、选几个

（2）购物车数量增加、减少、手输数量

（3）购物车记录的删除

详细代码如下：

{% extends "base_no_cart.html" %} {% load staticfiles %} {% block title %}天天生鲜-购物车{% endblock title %} {% block page_title %}购物车{% endblock page_title %} {% block body %} <div class="total_count">全部商品<em>{{ total_count }}</em>件</div> <ul class="cart_list_th clearfix"> <li class="col01">商品名称</li> <li class="col02">商品单位</li> <li class="col03">商品价格</li> <li class="col04">数量</li> <li class="col05">小计</li> <li class="col06">操作</li> </ul> {% for sku in skus %} <ul class="cart_list_td clearfix"> <li class="col01"><input type="checkbox" name="" checked></li> <li class="col02"><img src="{{ sku.image.url }}"></li> <li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li> <li class="col04">{{ sku.unite }}</li> <li class="col05">{{ sku.price }}元</li> <li class="col06"> <div class="num_add"> {% csrf_token %} <a href="javascript:;" class="add fl">+</a> <input type="text" sku_id="{{ sku.id }}" class="num_show fl" value="{{ sku.count }}"> <a href="javascript:;" class="minus fl">-</a> </div> </li> <li class="col07">{{ sku.amount }}元</li> <li class="col08"><a href="javascript:;">删除</a></li> </ul> {% endfor %} <ul class="settlements"> <li class="col01"><input type="checkbox" name="" checked=""></li> <li class="col02">全选</li> <li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_price }}</em><br>共计<b>{{ total_count }}</b>件商品</li> <li class="col04"><a href="place_order.html">去结算</a></li> </ul> {% endblock body %} {% block bottomfiles %} <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script> <script> // 计算被选中的商品的总件数和总价格 function update_page_info() { total_count = 0; total_price = 0; // 获取所有被选中的商品的checkbox, 获取所有别选中的商品所在的ul元素 $(".cart_list_td").find(":checked").parents("ul").each(function () { // 获取每条商品的数目和小计 count = $(this).find(".num_show").val(); amount = $(this).children(".col07").text(); // 累计计算商品的总件数和总价格, parseInt可以直接将amount后面的单位元去掉 count = parseInt(count); amount = parseFloat(amount); total_count += count; total_price += amount; }); // 设置被选中的商品的总件数和总价格 var $settlements = $(".settlements"); $settlements.find("em").text(total_price.toFixed(2)); $settlements.find("b").text(total_count); } // 计算商品的小计 function update_goods_amount(sku_ul) { // 获取商品的价格和数量 count = $(sku_ul).find(".num_show").val(); price = $(sku_ul).children(".col05").text(); // 计算商品小计 amount = parseInt(count) * parseFloat(price); // 重新设置商品的小计 $(sku_ul).children(".col07").text(amount.toFixed(2) + "元") } // 商品的全选和全不选 $(".settlements").find(":checkbox").change(function () { // 获取全选的checkbox的选中状态 is_checked = $(this).prop("checked"); // 遍历商品对应的checkbox,设置这些checkbox的选中状态和全选的checkbox保持一致 $(".cart_list_td").find(":checkbox").each(function () { $(this).prop("checked", is_checked); }); // 更新页面信息 update_page_info(); }); // 商品对应的checkbox状态发生改变时，设置全选checkbox的状态 $(".cart_list_td").find(":checkbox").change(function () { // 获取页面上所有商品的数目 all_len = $(".cart_list_td").length; // 获取页面上被选中的商品的数目 checked_len = $(".cart_list_td").find(":checked").length; if (all_len == checked_len) { // 全选选中 $(".settlements").find("input").prop("checked", true); } else { // 全选选中取消 $(".settlements").find("input").prop("checked", false); } // 更新页面的显示 update_page_info(); }) // 更新购物车中商品的数量 err_update = false; total = 0; function update_remote_cart_info(sku_id, count){ // ajax post请求必须加上csrf隐藏域发送给服务端 csrf = $("input[name='csrfmiddlewaretoken']").val(); // 组织参数 params = {"sku_id": sku_id, "count": count, "csrfmiddlewaretoken": csrf}; // 发送ajax请求,并设置ajax请求为同步的 $.ajaxSettings.async = false; // 默认发起的ajax请求是异步的，不会等回调函数执行 $.post("/cart/update/", params, function (data) { if (data.res == 5) { // 更新成功 err_update = false; total = parseInt(data.total_count); } else { // 更新失败 err_update = true; alert(data.errmsg); } }); // 设置ajax请求为异步 $.ajaxSettings.async = true; } // 购物车商品数量的增加 $(".add").click(function () { // 获取商品的id和商品的数量, 自定义属性需要使用attr，自带属性使用prop sku_id = $(this).next().attr("sku_id"); count = $(this).next().val(); count = parseInt(count) + 1; // 更新购物车中的记录 update_remote_cart_info(sku_id, count); // 判断是否更新成功 if (err_update == false) { // 重新设置商品的数量 $(this).next().val(count); // 计算商品的小计 update_goods_amount($(this).parents("ul")); // 获取商品对应checkbox的选中状态，如果被选中，更新页面信息 is_checked = $(this).parents("ul").find(":checkbox").prop("checked"); if (is_checked) { // 被选中，更新页面信息 update_page_info(); } // 更新页面上购物车商品的总件数 $(".total_count").children("em").text(total); } }); // 购物车商品数量的减少 $(".minus").click(function () { // 获取商品的id和商品的数量, 自定义属性需要使用attr，自带属性使用prop sku_id = $(this).prev().attr("sku_id"); count = $(this).prev().val(); count = parseInt(count) - 1; // 校验参数 if(count <= 0){ return; } // 更新购物车中的记录 update_remote_cart_info(sku_id, count); // 判断是否更新成功 if (err_update == false) { // 重新设置商品的数量 $(this).prev().val(count); // 计算商品的小计 update_goods_amount($(this).parents("ul")); // 获取商品对应checkbox的选中状态，如果被选中，更新页面信息 is_checked = $(this).parents("ul").find(":checkbox").prop("checked"); if (is_checked) { // 被选中，更新页面信息 update_page_info(); } // 更新页面上购物车商品的总件数 $(".total_count").children("em").text(total); } }) // 记录用户输入之前商品的数量 pre_count = 0; $(".num_show").focus(function () { pre_count = $(this).val(); }); // 手动输入购物车中的商品数量 $(".num_show").blur(function () { // 获取商品的id和商品的数量, 自定义属性需要使用attr，自带属性使用prop sku_id = $(this).attr("sku_id"); count = $(this).val(); // 校验输入的数据是否合法 if(isNaN(count) || count.trim().length == 0 || parseInt(count) <= 0){ // 设置商品的数目为用户输入之前的数目 $(this).val(pre_count); return; } count = parseInt(count); // 更新购物车中的记录 update_remote_cart_info(sku_id, count); // 判断是否更新成功 if (err_update == false) { // 重新设置商品的数量 $(this).val(count); // 计算商品的小计 update_goods_amount($(this).parents("ul")); // 获取商品对应checkbox的选中状态，如果被选中，更新页面信息 is_checked = $(this).parents("ul").find(":checkbox").prop("checked"); if (is_checked) { // 被选中，更新页面信息 update_page_info(); } // 更新页面上购物车商品的总件数 $(".total_count").children("em").text(total); } else{ // 设置商品的数目为用户输入之前的数目 $(this).val(pre_count); } }) // 购物车记录删除 $(".cart_list_td").children(".col08").children("a").click(function () { // 获取对应商品的id sku_id = $(this).parents("ul").find(".num_show").attr("sku_id"); // 组织参数 csrf = $("input[name='csrfmiddlewaretoken']").val(); params = {"sku_id": sku_id, "csrfmiddlewaretoken": csrf}; // 获取要删除的a标签所在的ul元素 sku_ul = $(this).parents("ul"); // 发送ajax post请求 $.post("/cart/delete/", params, function (data) { if(data.res == 3){ // 获取sku_ul中商品的选中状态 is_checked = sku_ul.find(":checkbox").prop("checked"); // 删除成功, 移除页面上商品所在的ul元素 sku_ul.remove(); if(is_checked){ // 更新页面信息 update_page_info(); } // 更新全部商品总件数 total = data.total; $(".total_count").children("em").text(total); } else{ //删除失败 alert(data.errmsg); } }) }) </script> {% endblock bottomfiles %}