Sunflower-13
- 浏览: 74122 次
- 性别:
- 来自: 长沙
-
文章分类
最新评论
-
Sunflower-13：
Sun_TW 写道写得真好，加油，谢谢鼓励、你也加油！
Oracle练习——建表、查询、过程、函数的使用 -
Sun_TW：
写得真好，加油，
Oracle练习——建表、查询、过程、函数的使用 -
Sunflower-13：
Sun_TW 写道感觉高级语言写简单一点。
网络通信之server/client通信的实现 -
Sun_TW：
很有帮助，谢谢。
学String类后的习题及二、八、十、十六、九进制之间相互转换 -
Sun_TW：
写的不错啊
js中三级联动的实现
用Ajax和Javascript实现购物车
用Ajax写了一个简易的购物车（做得比较简单），效果如图：
1、首先在数据库中建立了一个商品表，并加入了数据：
2、搭建好tomcat服务器，进入ProServlet可以看到商品信息表：
3、在商品列表中勾选要加入购物车的商品，点击加入购物车，如果商品添加成功，则会弹出添加成功的提示，添加失败则弹出添加失败的提示：
4、商品加入购物车成功后，点击跳转到购物车，则跳转到购物车列表
5、在购物车列表中增加商品数量
6、在购物车列表中减少商品数量，如果该商品数量为1就直接将该商品从购物车中删除
7、删除单个商品
8、清空购物车
下面就是实现代码：
dao层代码：
public class ProductDao {
private Connection conn = null;
private PreparedStatement ps = null;
private ResultSet rs = null;
/**
* 查询所有商品信息
* @return
*/
public List<Product> getProducts(){
conn = DBUtil.getConn();
String sql = "select * from PProduct ";
List<Product> products = new ArrayList<Product>();
try {
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()){
Product product = new Product();
product.setId(rs.getInt("id"));
product.setName(rs.getString("name"));
product.setPrice(rs.getDouble("price"));
product.setProdate(rs.getDate("prodate"));
product.setEffdate(rs.getDate("effdate"));
product.setUnit(rs.getString("unit"));
products.add(product);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
DBUtil.close(rs, ps, conn);
}
return products;
}
/**
* 根据商品编号查找单个商品信息
* @param id
* @return
*/
public Product getProductById(int id){
Product pro = new Product();
conn = DBUtil.getConn();
String sql = "select * from pproduct where id = ? ";
try{
ps = conn.prepareStatement(sql);
ps.setInt(1, id);
rs = ps.executeQuery();
if(rs.next()){
pro.setId(rs.getInt("id"));
pro.setName(rs.getString("name"));
pro.setPrice(rs.getDouble("price"));
pro.setProdate(rs.getDate("prodate"));
pro.setEffdate(rs.getDate("effdate"));
pro.setUnit(rs.getString("unit"));
}
}catch(Exception e){
e.printStackTrace();
}finally{
DBUtil.close(rs, ps, conn);
}
return pro;
}
}
servlet中的代码：
public class ProServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
//创建ProService对象
private ProService service = new ProService();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//在doGet()方法中调用doPost()
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置字符集编码格式
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//接收从页面传来的操作类型
String type = request.getParameter("type");
//定义CartService
CartService cart = null ;
//创建session
HttpSession session = request.getSession();
//从Session当中取购物车，查看此购物车是否存在
if(null == session.getAttribute("cart")){
cart = new CartService();
cart.init();
}else{
cart = (CartService)session.getAttribute("cart");
}
//将商品加入购物车
if("add".equals(type)){
String ids = request.getParameter("ids");
//开始封装商品项
String [] temp = ids.split(",");
for(String id : temp){
//id值即为商品编号,查询出商品
if(null==id||"".equals(id)){
continue;
}else{
Product product = service.getProductById(Integer.parseInt(id));
Items item = new Items();
item.setProduct(product);
item.setNum(1);
cart.add(item);
}
}
//商品已经加入到购物车,将原有的购物车替换掉
session.setAttribute("cart", cart);
//向浏览器返回后台操作
out.print("ok");
}
//显示商品列表
else if(null==type){
List<Product> products = service.getProducts();
request.setAttribute("products", products);
request.getRequestDispatcher("list.jsp").forward(request, response);
}
//删除单个商品
else if("delete".equals(type)){
int id = Integer.parseInt(request.getParameter("id"));
boolean result = cart.removePro(id);
if(result){
out.print("ok");
}
}
//清空购物车
else if("clear".equals(type)){
boolean result = cart.clear();
// if(result==true){
// out.print("\t\t\t\t\t\t\t已清空购物车"+"\t\t");
// }
request.getRequestDispatcher("cartlist.jsp").forward(request, response);
}
//将购物车中商品数量加1
else if("addOne".equals(type)){
int id = Integer.parseInt(request.getParameter("id"));
Product product = service.getProductById(id);
Items item = new Items();
item.setProduct(product);
boolean result = cart.addOne(item);
if(result){
out.print("ok");
}
}
//将购物车中商品数量减1，如果该商品只有一个的话就将该商品从购物车中删除
else if("subOne".equals(type)){
int id = Integer.parseInt(request.getParameter("id"));
Product product = service.getProductById(id);
Items item = new Items();
item.setProduct(product);
boolean result = cart.subOne(item);
if(result){
out.print("ok");
}
}
out.flush();
out.close();
}
}
ProService的代码：
public class ProService {
private ProductDao dao = new ProductDao();
public Product getProductById(int id){
return dao.getProductById(id);
}
public List<Product> getProducts(){
return dao.getProducts();
}
}
CartService的代码：
public class CartService {
private Map<Integer,Items> map;
public void init(){
map = new HashMap<Integer, Items>();
}
public Map<Integer, Items> getMap() {
return map;
}
public void setMap(Map<Integer, Items> map) {
this.map = map;
}
/**
* 将商品放入购物车
* @param item
* @return
*/
public boolean add(Items item){
if(map.containsKey(item.getProduct().getId())){//代表包含了此商品，则在数量上加一
Items temp = map.get(item.getProduct().getId());
temp.setNum(temp.getNum()+1);
map.put(temp.getProduct().getId(), temp);
}else{
map.put(item.getProduct().getId(), item);//代表商品第一次加入购物车
}
return true;
}
/**
* 清空购物车
* @return
*/
public boolean clear(){
map.clear();
return true;
}
/**
* 指定删除某个商品
* @param id
* @return
*/
public boolean removePro(int id ){
map.remove(id);
return true;
}
/**
* 商品加1
* @return
*/
public boolean addOne(Items item){
Items temp = map.get(item.getProduct().getId());
temp.setNum(temp.getNum()+1);
map.put(temp.getProduct().getId(), temp);
return true;
}
/**
* 商品减1
* @return
*/
public boolean subOne(Items item){
if(item.getNum()==1){
removePro(item.getProduct().getId());
}else{
Items temp = map.get(item.getProduct().getId());
temp.setNum(temp.getNum()-1);
map.put(temp.getProduct().getId(), temp);
}
return true;
}
}
商品列表页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML >
<html>
<head>
<title>商品列表信息</title>
</head>
<body>
<h3>商品列表信息</h3>
<table width="100%" border="2">
<tr>
<td><input type="checkbox" id="all" onclick="allCheck(this)"/>全选</td>
<td>商品编号</td>
<td>商品名</td>
<td>商品价格</td>
<td>生产日期</td>
<td>保质期</td>
<td>单位</td>
</tr>
<c:forEach var="pro" items="${products}">
<tr>
<td><input type="checkbox" name="prochk" value="${pro.id }"/></td>
<td>${pro.id }</td>
<td>${pro.name }</td>
<td>${pro.price }</td>
<td>${pro.prodate }</td>
<td>${pro.effdate }</td>
<td>${pro.unit}</td>
</tr>
</c:forEach>
</table>
<br/>
<div style="float:right;">
[url=javascript:addPro();]加入购物车[/url]
[url=cartlist.jsp ]跳转到购物车[/url]
</div>
</body>
<script>
var xhr = null;
function createXhr(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function addPro() {
//获取需要加入购物车商品编号
var ids = "";
var prochk = document.getElementsByName("prochk");
for (var i = 0; i < prochk.length; i++) {
if (prochk[i].checked) {
ids += prochk[i].value + ",";
}
}
//连接后台，将商品编号，发送到后台
createXhr();
//打开连接
xhr.open("post", "ProServlet", true);
//设置post请求的请求头
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//传送参数
var data = "type=add&ids="+ids;
xhr.send(data);
xhr.onreadystatechange=function(){
//判断服务器是否响应成功！
if(xhr.readyState==4&&xhr.status==200){
if(xhr.responseText=="ok"){
alert("添加成功！");
}else{
alert("添加失败！");
}
}
}
}
function allCheck(obj) {
var checkBoxList = document.getElementsByName("prochk");
if (obj.checked == true) {
for (var i = 0; i < checkBoxList.length; i++) {
checkBoxList[i].checked = true;
}
} else {
for (var i = 0; i < checkBoxList.length; i++) {
checkBoxList[i].checked = false;
}
}
}
</script>
</html>
购物车信息列表页面：
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML >
<html>
<head>
<title>购物车列表信息</title>
</head>
<body>
<h3>购物车列表信息</h3>
<table width="100%" border="2">
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>生产日期</td>
<td>失效日期</td>
<td>商品单位</td>
<td>商品数量</td>
<td>商品总额</td>
<td>操作</td>
</tr>
<c:forEach var="item" items="${cart.map }">
<tr>
<td>
${item.key }
</td>
<!-- Items -->
<td>${item.value.product.name }</td>
<td>${item.value.product.price }</td>
<td>${item.value.product.prodate }</td>
<td>${item.value.product.effdate }</td>
<td>${item.value.product.unit }</td>
<td>
<input type="text" min="1" value="${item.value.num }"
style="width:30px" readonly/>
<input type="button" value="+" onclick="javascript:addOne(${item.key})"/>
<input type="button" value="-" onclick="javascript:subOne(${item.key})"/>
</td>
<td>${item.value.product.price*item.value.num }</td>
<td>
<input type="hidden" name="id" value="${item.key }"/>
[url=javascript:deleteProductItem(${item.key});]删除[/url]
</td>
</tr>
</c:forEach>
</table>
<br>
<div style="float: right;">
[url=ProServlet?type=clear]清空购物车[/url] [url=ProServlet]返回[/url]
</div>
</body>
<script>
var xhr=null;
//创建引擎对象
function createXhr(){
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//删除单个商品
function deleteProductItem(id){
if(confirm("确定删除该商品吗？")){
createXhr();
xhr.open("get", "ProServlet?type=delete&id="+id, true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
if(xhr.responseText=="ok"){
alert("删除成功！");
window.location.reload();
}else{
alert("删除失败！");
}
}
}
}
}
//商品数量加1
function addOne(id){
createXhr();
xhr.open("get", "ProServlet?type=addOne&id="+id, true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
if(xhr.responseText=="ok"){
alert("添加成功！");
window.location.reload();
}else{
alert("添加失败！");
}
}
}
}
//商品数量减1
function subOne(id){
createXhr();
xhr.open("get", "ProServlet?type=subOne&id="+id, true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
if(xhr.responseText=="ok"){
alert("商品减一！");
window.location.reload();
}else{
alert("失败！");
}
}
}
}
</script>
</html>
pproduct实体类：
public class Product implements Serializable{
private static final long serialVersionUID = 1L;
private int id;
private String name;
private double price;
private Date prodate;
private Date effdate;
private String unit;
public Product() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public Date getProdate() {
return prodate;
}
public void setProdate(Date prodate) {
this.prodate = prodate;
}
public Date getEffdate() {
return effdate;
}
public void setEffdate(Date effdate) {
this.effdate = effdate;
}
public String getUnit() {
return unit;
}
public void setUnit(String unit) {
this.unit = unit;
}
}
item实体类：
public class Items implements Serializable{
private static final long serialVersionUID = 1L;
private Product product;
private int num;
public Items() {
}
public Product getProduct() {
return product;
}
public void setProduct(Product product) {
this.product = product;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
- 大小: 49.1 KB
- 大小: 83.8 KB
- 大小: 33.6 KB
- 大小: 37.2 KB
- 大小: 96.9 KB
- 大小: 44.4 KB
- 大小: 49.4 KB
- 大小: 47 KB
- 大小: 7.5 KB
1
顶
顶
0
踩
踩
分享到：
发表评论
相关推荐
\n\n实现过程中，前端可能使用JavaScript库如jQuery简化Ajax调用，同时利用JSON格式传递数据，因为它具有良好的可读性和兼容性。后端JSP可能结合Servlet或者Model 2 MVC架构来处理请求和响应。\n\n总的来说，这个...
本项目"购物车（纯AJAX实现）"完全基于AJAX技术来实现实时更新和交互，无需刷新页面，提高了用户体验。通过这个项目，我们可以学习到以下几个关键的AJAX和JavaScript知识点： 1. **AJAX基础**：AJAX（Asynchronous ...
本文将深入探讨如何使用AJAX技术来实现一个动态、无刷新的购物车系统。 首先，我们需要理解AJAX（Asynchronous JavaScript and XML）的核心原理。AJAX允许我们在不重新加载整个网页的情况下与服务器交换数据并更新...
综上所述，用JavaScript开发购物车不仅涉及到前端的用户交互和数据管理，还需要考虑与后端Asp.net的通信，以及用户体验、数据安全等多个方面。通过这个项目，你可以深化对JavaScript编程、前端开发流程以及前后端...
在本文中，我们将深入探讨如何使用Ajax技术来实现一个可拖动的购物车功能。Ajax，全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的...
1. **添加商品**：当用户点击“加入购物车”按钮时，JavaScript会捕获这个事件，然后使用Ajax向服务器发送请求，包含商品ID和数量。服务器接收到请求后，处理添加操作，并返回更新后的购物车信息。Ajax回调函数接收...
本示例展示了一个使用Ajax技术来实现的无刷新网上购物车，使得用户在添加、删除商品时无需重新加载整个页面，提高了用户体验。 【描述】：“jsp+ajax的实现小示例，无刷新的购物车例子。” 这个项目采用JavaServer...
AJAX购物车是这种技术的一个典型应用，通过异步通信，实现了用户在添加、删除商品到购物车时，页面无需跳转即可完成操作，极大地提升了用户体验。 **一、AJAX基础概念** 1. **异步通信**：AJAX的核心是...
可以使用JavaScript对象或数组来实现，例如： ```javascript var cart = { item1_id: {quantity: 2, price: 199}, item2_id: {quantity: 1, price: 399}, }; ``` 2. 功能需求： - 添加商品：用户选择商品后，...
**Ajax 实现购物车** 购物车是电商网站中不可或缺的一部分，它允许用户在不离开当前页面的情况下添加、删除或修改商品数量。对于初学者来说，理解如何使用Ajax技术来实现这一功能是一项重要的技能。Ajax...
本项目仅仅演示如何用javascript+cookie实现购物车功能，而且是AJAX哦，无刷新效果。真正项目中，需要继续完善，比如用户输入的商品数量是否为数字，是否大于0。用户如何修改商品数量？等等。关于购物车，我的想法是...
【购物车-Ajax实现实例】是一个典型的电子商务网站功能模块，用于模拟用户在虚拟商城中添加、删除商品至购物车的过程。在这个实例中，我们主要关注的是如何利用Ajax技术实现页面无刷新更新，以及与服务器端JSP进行...
在这个购物车Dome中，开发者提供了一个完整的例子，包含了MySQL数据库设计、JSP页面和AJAX交互，帮助学习者理解如何结合这些技术实现购物车功能。 在实际应用中，这个购物车系统可能还包括以下组件和概念： - **...
在这个场景中，我们将探讨如何使用HTML和JavaScript来简单实现一个购物车功能。 首先，HTML用于构建页面的基本结构。在创建购物车页面时，我们需要以下几个关键元素： 1. 商品列表：HTML可以使用`<ul>`和`<li>`...
综上所述，Ajax购物车下拉显示插件在Magento中的实现涉及到了前端和后端的交互，利用Ajax技术实现了购物车信息的实时更新，提升了用户在购物过程中的体验。开发者需要了解Magento的架构和Ajax的工作原理，才能有效地...
"PHP AJAX动态购物车"是一个实现此功能的技术方案，它结合了PHP服务器端语言和AJAX（异步JavaScript和XML）技术，以提供实时更新、无需页面刷新的用户体验。 PHP是一种广泛使用的开源脚本语言，尤其适用于Web开发。...
这个名为"AJAX实现的购物车源代码"的压缩包文件，显然包含了一个使用AJAX技术构建的购物车系统。下面将详细介绍AJAX在购物车应用中的核心概念、实现原理以及可能涉及的关键技术。 1. **异步通信**：AJAX的核心是...
在Web开发领域，AJAX（Asynchronous JavaScript and XML）是一种技术，它允许网页不重新加载整个页面的情况下与服务器交换数据并局部更新页面内容。这种技术极大地提升了用户体验，因为它减少了页面跳转的时间，使得...
在Asp.Net开发中，Ajax（异步JavaScript和XML）技术的应用极大地提升了用户体验，通过页面局部刷新实现了数据的动态更新，而无需整个页面的重新加载。在这个“Asp.Net Ajax 购物车”项目中，我们将深入探讨如何利用...