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

69 阅读 0 评论 46 点赞

我是靠谱客的博主单纯冷风，最近开发中收集的这篇文章主要介绍Javaweb开发,实现'购物车'的遍历与操作(页面数据刷新、后台操作反馈)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Javaweb中，jsp中遇到类似购物车等类型的页面操作，真的是多…

类似购物车之类的操作，麻烦就在于物品的遍历与操作
这里介绍两种方法帮助大家解决问题，
下文中使用代码都是我刚写完的课题代码，保证可以正常使用，哈哈…

(ps.以下代码都是已经传入数组，本文仅解决类似购物车的多个数组元素时在页面中该如何操作的问题)

1.指定数组的下标进行操作

这个方法稍微笨点，适合元素数量不多的数组操作.

<!--
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>

2.使用< c:forEach >遍历数组操作

使用c标签库中的foreach来实现
< c:forEach >好用，也节省了代码量，但是遇到需要有按钮、链接等功能时候，却让人有点犯难了.
这个方法十分简单，适合数量多的数组

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

<!--
这里先说几句(也是本人经验与技术都不够)：
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>

function delBook() {
if(!confirm("确认要移除此书？")) {
window.event.returnValue = false;
}
}
function buyBook() {
if(!confirm("确认要购买此书？")) {
window.event.returnValue = false;
}
}

3.‘click’之后，该怎么办？

后台的操作怎么让用户知道处理结果？
单击链接之后页面刷新出最新数据？
我说说我自己的处理办法

1. 标题一中的方法(适合收藏物品、放入购物车等操作)：

直接在js中使用.open(“GET”, “/url?par=”+par);方法传入参数，进行后台操作
页面无须跳转，后台操作之后，在servlet中使用PrintWriter向页面print出true/false，在js中使用.responseText接收取得print的值
再通过print的值为true或false，判断操作成功与否，直接 alter(); 弹窗提示
2. 标题二中的方法(适合购买物品，清空购物车等操作)：
这种方法还是比较适合购物车之类的操作，因为可以重定向，可以帮我们起到刷新页面的效果
和上文一样，我是直接使用href=”“进行传入参数，从而后台操作
后台操作之后，可由此servlet进行读取数据库操作，获得更改后的数据，设置在request中传给jsp
(我是建议设置请求属性request.setAttribute()即可，别用session之类的操作)
这样操作的页面既完成了指定的动作，又可以起到刷新页面的效果
(大家一定注意 url的变化，重定向和重转发是不一样的)

由于技术与经验的关系，可能我的思路还比较狭隘.
希望能够帮助大家解决手上的难题.

加油，与大家共勉.