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