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

【转载】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));
            }
        }
    });

}