【转载】https://blog.csdn.net/luliuying_01/article/details/78177617?locationNum=8&fps=1

由于在做答辩项目,做到购物车订单就自己研究了一下ajax进行页面异步更新,简单的写如下,等更加深入了解再进行更新

jsp界面

<div id="content">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
 <form action="" method="post" name="myform">
  <tr>
    <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td>
    <td class="title_2" colspan="2">店铺宝贝</td>
     <td class="title_3">获积分</td>
    <td class="title_4">单价(元)</td>
    <td class="title_5">数量</td>
    <td class="title_6">小计(元)</td>
    <td class="title_7">操作</td>
  </tr>
  <tr>
    <td colspan="8" class="line"></td>
  </tr>
  <c:forEach items="${list}" var="oc">
  <tr>
    <td colspan="8" class="shopInfo">
        <a href="#">${oc.order.oid}</a>    卖家:<a href="#">${oc.order.userid.userid}</a> <img src="cart/images/taobao_relation.jpg" alt="relation" />
   </td>
  </tr>
   <tr id="product1">
    <td class="cart_td_1">
         <input type="hidden" value="${oc.orecorderid}">
         <input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" />
    </td>
    <td class="cart_td_2"><img src="upload/${oc.goods.picture}" width="100px" height=60px alt="shopping"/></td>
    <td class="cart_td_3"><a href="#">${oc.goods.gname}</a><br />
      <br />
      
    <td class="cart_td_4">5</td>
    <td class="cart_td_5">${oc.goods.gprice}</td>
    <td class="cart_td_6">
    <input type="hidden" value="${oc.rnumber}">
    <img src="cart/images/taobao_minus.jpg" alt="minus"  onclick="changeMinusNum(this)"  id="minus"/> 
    <input id="num_1" type="text"  value="${oc.rnumber}" class="num_input" readonly="readonly"/> 
    <img src="cart/images/taobao_adding.jpg" alt="add" onclick="changeAddNum(this)"  id="add"/></td>
    <td class="cart_td_7"></td>
    <td class="cart_td_8"><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
  </tr>
  
  </c:forEach>
  
   <tr>
   <td  colspan="3"><a href="javascript:" onclick="deleteSelectRow()"><img src="cart/images/taobao_del.jpg" alt="delete"/></a></td>
    <td colspan="5" class="shopend">商品总价(不含运费):<label id="total" class="yellow"></label> 元<br />
    可获积分 <label class="yellow" id="integral"></label> 点<br />
    <input name=" " type="image" src="cart/images/taobao_subtn.jpg" /></td>
  </tr>
  </form>
</table>
<div style="text-align:center;">

</div>
</div>

</body>
</html>

is界面

// JavaScript Document

/*增加所购商品的数量*/
function changeAddNum(add) {
    var rnumber = $(add).prev().val();
    rnumber++;
    var orecorderid = $(add).parent().siblings(":eq(0)").children(":eq(0)").val();
    $.ajax({
        url : "OrderrecordServlet",
        data : {
            methods :"addNum",orecorderid:orecorderid,rnumber:rnumber,
        },
        success : function(result) {
            if (result) {
                $(add).prev().val(rnumber);
                var preprice = parseInt($(add).parent().prev().html());
                $(add).parent().next().html(preprice*rnumber); 
                $("#total").html(parseInt($("#total").html())+preprice);
            }
        }
    });
}

/**
 * 减少所购买商品的数量
 */
function changeMinusNum(minus)
{
    var minusNum = $(minus).next().val();
    if(minusNum>1){
        minusNum--;
        var orecorderid = $(minus).parent().siblings(":eq(0)").children(":eq(0)").val();
        console.log(orecorderid);
        $.ajax({
            url:"OrderrecordServlet",
            data:{methods :"minusNum",orecorderid:orecorderid,minusNum:minusNum},
            success:function(result){
                if(result){
                    $(minus).next().val(minusNum);
                    var preprice = parseInt($(minus).parent().prev().html());
                    $(minus).parent().next().html(preprice*minusNum);
                    $("#total").html(parseInt($("#total").html())-preprice);
                }
            }
        });
    }
}

/*
 * function changeNum(numId,flag){numId表示对应商品数量的文本框ID,flag表示是增加还是减少商品数量 var
 * numId=document.getElementById(numId); if(flag=="minus"){减少商品数量 if(numId.value<=1){
 * alert("宝贝数量必须是大于0"); return false; } else{
 * numId.value=parseInt(numId.value)-1; productCount(); } } else{flag为add,增加商品数量
 * numId.value=parseInt(numId.value)+1; productCount(); } }
 */

/* 自动计算商品的总金额、总共节省的金额和积分 */
function productCount() {
    var total = 0; // 商品金额总计
    var integral = 0; // 可获商品积分

var point; // 每一行商品的单品积分
    var price; // 每一行商品的单价
    var number; // 每一行商品的数量
    var subtotal; // 每一行商品的小计

/* 访问ID为shopping表格中所有的行数 */
    var myTableTr = document.getElementById("shopping").getElementsByTagName(
            "tr");
    if (myTableTr.length > 0) {
        for (var i = 1; i < myTableTr.length; i++) {/* 从1开始,第一行的标题不计算 */
            if (myTableTr[i].getElementsByTagName("td").length > 2) { // 最后一行不计算
                point = myTableTr[i].getElementsByTagName("td")[3].innerHTML;
                price = myTableTr[i].getElementsByTagName("td")[4].innerHTML;
                number = myTableTr[i].getElementsByTagName("td")[5]
                        .getElementsByTagName("input")[0].value;
                integral += point * number;
                total += price * number;
                myTableTr[i].getElementsByTagName("td")[6].innerHTML = price
                        * number;
            }
        }
        document.getElementById("total").innerHTML = total.toFixed(2);
        document.getElementById("integral").innerHTML = integral;

}
}
window.onload = productCount;

/* 复选框全选或全不选效果 */
function selectAll() {
    var oInput = document.getElementsByName("cartCheckBox");
    for (var i = 0; i < oInput.length; i++) {
        oInput[i].checked = document.getElementById("allCheckBox").checked;
    }
}

/* 根据单个复选框的选择情况确定全选复选框是否被选中 */
function selectSingle() {
    var k = 0;
    var oInput = document.getElementsByName("cartCheckBox");
    for (var i = 0; i < oInput.length; i++) {
        if (oInput[i].checked == false) {
            k = 1;
            break;
        }
    }
    if (k == 0) {
        document.getElementById("allCheckBox").checked = true;
    } else {
        document.getElementById("allCheckBox").checked = false;
    }
}

/* 删除单行商品 */
function deleteRow(rowId) {
    var orecorderid = $(rowId).parent().siblings(":eq(0)").children(":eq(0)")
            .val();
    $.ajax({
        url : "OrderrecordServlet",
        data : {
            methods : "delrow",
            orecorderid : orecorderid
        },
        success : function(result) {
            if (result) {
                $(rowId).parent().parent().prev().remove();
                $(rowId).parent().parent().remove();
                $("#total").html((parseInt($("#total").html())-parseInt($(rowId).parent().prev().html())).toFixed(2));
            }
        }
    });

}

ajax 实现订单商品数量的增减及订单的删除进行异步更新界面的更多相关文章

  1. 第八十四篇:Vue购物车(五) 商品数量的增减

    好家伙, 1.商品数量的增减 我们把商品的数量增减独立出来,写成一个独立的组件Counter <template> <div class="number-container ...

  2. 根据查询出各地订单商品数量 group by

    order订单表,orderprduct订单商品表,area地区表 SELECT (a1.Name+a2.Name+a3.Name) AS areanaem,orderArea.AreaId,orde ...

  3. 127_Power Pivot&Power BI DAX计算订单商品在库时间(延伸订单仓储费用)

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 前面已经写过一个先进先出的库龄案例,在业务发生又有这样一个需求:先进先出前提,需要按照订单计算每个商品在库时间, ...

  4. 【SSH网上商城项目实战28】使用Ajax技术局部更新商品数量和总价

         转自: https://blog.csdn.net/eson_15/article/details/51487323 昨天把项目部署了一下,玩了玩,今天完善了一下购物车中修改商品数量就能局部 ...

  5. 22Mybatis_订单商品数据模型_多对多查询以及对多对多查询的总结

    之前讲了一对一,一对多查询,这篇文章讲的是多对多. 先给出需求:查询用户及用户购买商品信息. 我们由之前的文章知道,这个需求是多对多的. 还是那个终止我们的mybatis所做的不管是之前的一对一还是一 ...

  6. ecshop 属性表(attribute)商品属性表(goods_attr)货品表(prduct) 商品数量的联系

    ecshop 属性表(attribute)商品属性表(goods_attr)货品表(prduct) 商品数量的联系 一个商城的商品属性存放在属性表(attribute)里 ,每个商品对应的属性在goo ...

  7. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  8. 21Mybatis_订单商品数据模型_一对多查询——resultMap方式

    这篇文章延续订单商品数据模型,这张讲述的是一对多的查询.(用resultMap) 给出几张表的内容: User表:

  9. 19Mybatis_订单商品数据模型分析

    这篇文章是对订单商品数据模型进行分析(会给出分析思路),有四张表.这篇文章是后续文章的基础,因为后续的文章要针对这个数据模型(四张表)进行一对一,一对多,多对多进行查询. 我们以后会碰到各种各样的数据 ...

随机推荐

  1. 洛谷 P1314 聪明的质监员【二分+前缀和】

    真是zz, 题目很显然是二分W,然后判断,我一开始是用线段树维护当前w[i]>W的个数和v(公式就是区间满足要求的个数*满足要求的v的和),然后T成70 后来想到树状数组差分常数或许会小,于是改 ...

  2. shiro之自定义realm

    Shiro认证过程 创建SecurityManager--->主体提交认证--->SecurityManager认证--->Authenticsto认证--->Realm验证 ...

  3. hdu1879 继续畅通工程 基础最小生成树

    #include <cstdio> #include <cstdlib> #include <algorithm> #include <cmath> u ...

  4. Distance in Tree CodeForces - 161D

    Distance in Tree CodeForces - 161D 题意:给一棵n个结点的树,任意两点之间的距离为1,现在有点u.v,且u与v的最短距离为k,求这样的点对(u,v)的个数((u,v) ...

  5. 牛客国庆集训派对Day_1~3

    Day_1 A.Tobaku Mokushiroku Kaiji 题目描述 Kaiji正在与另外一人玩石头剪刀布.双方各有一些代表石头.剪刀.布的卡牌,每局两人各出一张卡牌,根据卡牌的内容决定这一局的 ...

  6. html img标签显示一个默认图片

    1. [代码]img标签src对应的图片不存在,显示一个默认的图片 <img src="abc.JPG" onerror="this.src='default.JP ...

  7. 521 Longest Uncommon Subsequence I 最长特殊序列 Ⅰ

    给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列).子序列可以通过删去字符串中的某些字符实现,但不能改变剩余 ...

  8. [已读]web性能实践日志

    书是在今年5月份出版,但是书中的内容是发表于11年到12年之间的,如果知道这一点,我一定不会买~ 列举一下大致内容: YSlow localStroage读取数据最佳策略 性能优化各种策略(图片精灵 ...

  9. oracle PL、SQL(概念)

    一.PL/SQL简介. Oracle PL/SQL语言(Procedural Language/SQL)是结合了结构化查询和Oracle自身过程控制为一体的强大语言,PL/SQL不但支持更多的数据类型 ...

  10. AJPFX总结抽象类和接口的区别

    /*                 * 抽象类和接口的区别                 *                 1.成员的区别                         *   ...