点击商品进入详情页面

最新推荐文章于 2022-10-08 14:20:27 发布

码农_小庄

最新推荐文章于 2022-10-08 14:20:27 发布

阅读量7.9k

点赞数 14

分类专栏： javaWeb

本文链接： https://blog.csdn.net/weixin_44715643/article/details/103917067

版权

javaWeb 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

需求：点击商品，进入对应商品的详情页面

实现：获取商品的Id运用<a>标签使用Url参数，将商品Id发送到Servlet。

看url地址就知道发送请求时将商品id发送出去了

Html代码

<c:forEach var="item" items="${list}">
		<div class="window">
			<div class="imageContainer">
				<span class="imgLink">
				<a target="_blank"  href="${ctx }/ProductDetailsServlet?id=${item.id }" ><img src="${item.imgUrl}"/></a>			
				</span>
			</div>
		</div>
	</c:forEach>

Servlet代码

        //获取Session对象
		HttpSession session = request.getSession();
		//service进行逻辑处理
		ProductService service=new ProductService();
		//获取url中的参数
		String	productlId= request.getParameter("id");
		//将String转为int
		int id=Integer.parseInt(productlId);
		//通过商品Id获取商品信息
		Product product=service.getUserIdList(id);
		//将商品信息存放到Request域中
		request.setAttribute("product", product);
		//跳转到商品的详情页面
		request.getRequestDispatcher("/test/detail.jsp").forward(request, response);

Service层

    /*
	 * 根据商品Id查询商品
	 */
		public Product getUserIdList(int id) {
			//返回结果
				Product result = null;
					//返回结果
					if(id>0) {
					result=this.dao.getProductID(id);
					}
					return result;
}

Dao层

    /*
	 * 通过商品Id查询商品
	 */
	public Product getProductID(Integer id){
	    Product list=null;
		String sql="select * from product where id=?";
		try {
			list=(Product) runner.query(sql, new BeanHandler(Product.class),id);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;
	}

最后到商品详情页面接收信息

<div class="bigbox">
<div id="img-tb">
	<img src="${product.imgUrl }"/>
	<div id="slider"></div>
</div>
<div id="img-big">
	<img src="${product.imgUrl }"/>
</div>
<div class="detail">
  <h1>${product.desc }</h1>
  <p class="newp">双12返场 专区2件9折，3件8.5折 全场包邮</p>
</div>
<div class="panel">
	<div class="pl">价格</div>
	<em class="my">¥</em>
	<span class="price">${product.price}</span>
</div>

<div class="yunfei">
	<dl class="all">
	<dt class="yf">运费</dt>
<div class="message">
	<span class="location">浙江温州 至 阳江</span>
</div>
<div class="text">店铺预售,付款后7天内发货</div>
</dl></div>

<div class="last">
<div class="one">
	<dt class="chima">尺码</dt>
	<dd>
		<ul>
        <li><a href="#" role="button" tabindex="0">
        	<span>S/165</span>
            </a></li>
        <li><a href="#" role="button" tabindex="0">
        	<span>M/170</span>
            </a></li>
        <li><a href="#" role="button" tabindex="0">
        	<span>L/175</span>
            </a></li>
        <li><a href="#" role="button" tabindex="0">
        	<span>XL/180</span>
            </a></li>
        </ul>
    </dd>
</div>
</div> 

<div class="amount">
	<dt class="shuliang"><p style=" font-size:18px;">数量</p></dt>
	<%@include file="../test/test.jsp" %>
	<input id="productId" name="productId" value="${product.id }" type="hidden">

</div> 
<div class="shop">
<div class="l">
	<a id="J_LinkBuy" href="#" rel="nofollow" data-addfastbuy="true" title="点击此按钮，到下一步确认购买信息。" role="button" onclick="goumai();">立即购买<span class="ensureText">确认</span></a>
</div>
<div class="r">
	<a href="" target="_blank" rel="nofollow" role="button" onclick="addShopCart();" >加入购物车<span class="ensureText" >确认</span></a>
</div>
</div>
</div>