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));
            }
        }
    });

}