易买网购物车结算用jsp怎么做

JavaScript015

易买网购物车结算用jsp怎么做,第1张

页面jsp ：

<%@ page language="java" contentType="text/html charset=utf-8"

    pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>易买网 - 首页</title>

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css" />

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>

<script type="text/javascript">

var contextPath = '${pageContext.request.contextPath }'

</script>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/shopping.js"></script>

</head>

<body>

<jsp:include page="top.jsp" />

<div id="position" class="wrap">

您现在的位置：<a href="Home">易买网</a> &gt 购物车

</div>

<div class="wrap">

<div id="shopping">

<form action="" method="post">

<table>

<tr>

<th>商品名称</th>

<th>商品价格</th>

<th>购买数量</th>

<th>操作</th>

</tr>

<c:forEach items="${sessionScope.shopCar}"  var="item" varStatus="status">

<tr id="product_id_${item.proId}">

<td class="thumb"><img src="${item.proImg }" height="50" width="30" /><a href="Product?action=view&entityId=${item.proId}">${item.proName}</a></td>

<td class="price" id="price_id_1">

<span><fmt:formatNumber value="${item.proPrice}" type="NUMBER" minFractionDigits="2" /></span>

<input type="hidden" value="${item.proPrice}" />

</td>

<td class="number">

<dl>

<dt><span onclick="sub('number_id_${item.proId}','${item.proId}')">－</span><input id="number_id_${item.proId}" type="text" readonly="readonly" name="number" value="${item.proNum}" /><span onclick="addNum('number_id_${item.proId}','${item.proId}')">＋</span></dt>

</dl>

</td>

<td class="delete"><a href="javascript:deleteItem('product_id_${item.proId}','${item.proId}')">删除</a></td>

</tr>

</c:forEach>

</table>

<div class="button"><input type="submit" value="" /></div>

</form>

</div>

</div>

<div id="footer">

Copyright &copy  kaka qq 292817678 itjob  远标培训. 

</div>

</body>

</html>

页面关联的js 自己去网上下载一个jquery

/*数量减少*/

function sub(id,proId){

//购买数量的值

var num = $('#'+id).val()

if(num > 1){

$('#'+id).val(num - 1)

}

edit(id,proId)

}

function edit(id,proId){

var url = contextPath + '/HomeCarManager'

//修改后的数量，购物明细的商品的id

num = $('#'+id).val()

$.post(url,{"num":num,"proId":proId},function (msg){

/*

if(msg == 'true'){

alert('修改成功')

} else {

alert('修改失败')

}*/

})

}

/**

 * 数量增加

 * @param {} id

 */

function addNum(id,proId){

//购买数量的值

var num = $('#'+id).val()

$('#'+id).val(parseInt(num) + 1)

edit(id,proId)

}

/**

 * 删除购物明细

 */

function deleteItem(trId,proId){

//

//console.log($("#"+trId))

//js删除页面节点

//$("#"+trId).remove()

var url = contextPath + '/HomeCarManager'

$.post(url,{"proId":proId},function (msg){

if(msg == 'true'){

//js删除页面节点

$("#"+trId).remove()

}

})

}

后台servlet1

package com.kaka.web

import java.io.IOException

import java.io.PrintWriter

import java.util.ArrayList

import java.util.List

import javax.servlet.ServletException

import javax.servlet.http.HttpServlet

import javax.servlet.http.HttpServletRequest

import javax.servlet.http.HttpServletResponse

/**

 * 购物车处理类

 * @author @author ITJob 远标培训

 *

 */

import com.kaka.entity.Items

import com.kaka.entity.Product

import com.kaka.service.ProductService

import com.kaka.service.impl.ProductServiceImpl

public class HomeCar extends HttpServlet {

private static final long serialVersionUID = 1L

ProductService ps = new ProductServiceImpl()

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//获取商品的id

String proId = req.getParameter("proId")

resp.setContentType("text/htmlcharset=UTF-8")

PrintWriter writer = resp.getWriter()

if(null != proId && !"".equals(proId)){

//返回添加购物车成功

//System.out.println("=============" + proId)

//根据商品的id查询商品

try {

Integer pId = Integer.parseInt(proId)

Product product = ps.findProductById(pId)

if(null != product){

//查询到了商品，将商品的相关参数构建一个购物明细放入到购物车

Items it = new Items()

it.setProId(product.getProId())

it.setProName(product.getProName())

it.setProPrice(product.getProPrice())

it.setProImg(product.getProImg())

//先判断session范围是否有购物车

List<Items> shopCar = (List<Items>)req.getSession().getAttribute("shopCar")

if(null == shopCar){

//购物车

shopCar = new ArrayList<Items>()

}

//将商品加入到购物车之前，判断购物车中是否已经包含了该购物明细，如果包含了，只需要修改购买的数量

if(shopCar.contains(it)){

int index  = shopCar.indexOf(it)//寻找购物车中包含购物明细在购物车中位置

Items items = shopCar.get(index)//获取购物车中存在的购物明细

items.setProNum(items.getProNum()+1)

} else {

shopCar.add(it)

}

//将购物车放入到session访问

req.getSession().setAttribute("shopCar", shopCar)

//返回

writer.print(true)

} else {

writer.print(false)

}

} catch (Exception e) {

e.printStackTrace()

writer.print(false)

}

} else {

writer.print(false)

}

writer.flush()

writer.close()

}

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

doPost(req, resp)

}

}

后台管理servlet

package com.kaka.web

import java.io.IOException

import java.io.PrintWriter

import java.util.ArrayList

import java.util.List

import javax.mail.FetchProfile.Item

import javax.servlet.ServletException

import javax.servlet.http.HttpServlet

import javax.servlet.http.HttpServletRequest

import javax.servlet.http.HttpServletResponse

/**

 * 购物车修改

 * @author ITJob 远标培训

 *

 */

import com.kaka.entity.Items

import com.kaka.entity.Product

import com.kaka.service.ProductService

import com.kaka.service.impl.ProductServiceImpl

public class HomeCarManager extends HttpServlet {

private static final long serialVersionUID = 1L

ProductService ps = new ProductServiceImpl()

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

resp.setContentType("text/htmlcharset=UTF-8")

PrintWriter writer = resp.getWriter()

//获取参数

String proId = req.getParameter("proId")

String num = req.getParameter("num")

if(null != proId && null != num

&& !"".equals(proId) && !"".equals(num)){

try {

Integer pId = Integer.parseInt(proId)

Float pNum = Float.parseFloat(num)

//根据商品的id获取对应的明细项

// 先判断session范围是否有购物车

List<Items> shopCar = (List<Items>) req.getSession().getAttribute("shopCar")

for(Items it : shopCar){

if(it.getProId()== pId){

it.setProNum(pNum)

}

}

writer.print(true)

} catch (Exception e) {

e.printStackTrace()

}

} else {

//删除的操作

try {

Integer pId = Integer.parseInt(proId)

//根据商品的id获取对应的明细项

// 先判断session范围是否有购物车

List<Items> shopCar = (List<Items>) req.getSession().getAttribute("shopCar")

Items items = null

for(Items it : shopCar){

if(it.getProId()== pId){

items = it

break

}

}

if(null != items){

shopCar.remove(items)

req.getSession().setAttribute("shopCar",shopCar)

}

writer.print(true)

} catch (Exception e) {

e.printStackTrace()

}

}

writer.flush()

writer.close()

}

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

doPost(req, resp)

}

}

这是需要多个方法才能完成的

1，需要动态添加商品那一条显示的function

2，个数那个需要一个增加减少的function

3， 需要个统计总数量的

4，需要一个检测checkbox的

你做到什么程度了