Javaweb开发,实现'购物车'的遍历与操作(页面数据刷新、后台操作反馈)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--
1.直接在${}中使用get()+下标的方法，获得元素，再获得元素的属性值.
2.onclick=""，为调用js文件，其参数若使用${}，则需要加上单引号''，才可以正常传入参数.
3.onclick中的js文件就不列出了.
4.href=""，其中的'javascript:;'并无实际作用.
-->
<table>
<tbody>
<tr>
<th align="left">书号</th>
<th align="left">书名</th>
<th align="left">书价</th>
</tr>
<tr>
<td>${BookList.get(0).id}</td>
<td>${BookList.get(0).name}</td>
<td>${BookList.get(0).price}</td>
<td>
<a href="javascript:;" onclick="addBook('${BookList.get(0).id}');" style="float:right;">加入购物车</a>
</td>
</tr>
<tr>
<td>${BookList.get(1).id}</td>
<td>${BookList.get(1).name}</td>
<td>${BookList.get(1).price}</td>
<td>
<a href="javascript:;" onclick="addBook('${BookList.get(1).id}');" style="float:right;">加入购物车</a>
</td>
</tr>
</tbody>
</table>

1
2
<!-- 记得在jsp顶部加上这句，才可以使用c标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--
这里先说几句(也是本人经验与技术都不够)：
1.之所以不使用 varStatus.index 取得当前遍历的下标，从而使用上文一样的方法，是因为试过了，不可行.
2.之所以不使用 onclick="" ，像上文一样把参数传给js去执行，是因为试过了，不可行(链接点击无反应).
当然，如果有使用以上方案解决问题的朋友，希望可以分享分享.
1.<c:forEach>的用法不赘述了，items=""是传入的数组，var=""是临时保存每一次从items取出的数组元素，就像java的foreach.
2.这里使用的是直接 href=""，将遍历的数组元素的属性直接给url传参.
3.onclick=""，只是一个简单的弹窗询问，代码在下面贴出.
-->
<table>
<tbody>
<tr>
<th align="left">书号</th>
<th align="left">书名</th>
<th align="left">书价</th>
</tr>
<c:forEach items="${cart}" var="book">
<tr>
<td>${book.id}</td>
<td>${book.name}</td>
<td>${book.price}</td>
<td>
<a href="/url?bid=${book.id}" onclick="buyBook();" style="float:left;">购买</a>
<a href="/url?bid=${book.id}" onclick="delBook();" style="float:right;">移除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>

1
2
3
4
5
6
7
8
9
10
function delBook() {
if(!confirm("确认要移除此书？")) {
window.event.returnValue = false;
}
}
function buyBook() {
if(!confirm("确认要购买此书？")) {
window.event.returnValue = false;
}
}