点击商品进入详情页面

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

实现：获取商品的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转为intint 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 blocke.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>

点击商品进入详情页面相关推荐

仿大众点评——商品的详情页面
我写的仿大众点评中有许多猜你喜欢的商品,但是每个商品详情页面都是用的一个vue组件,这个时候就需要我们使用动态路由,根据动态路径键的变化从未进入不同的商品详情页面动态路由 export defaul ...
微信小程序点击商品跳转商品详情页面的方法
最近在学习微信小程序电商类开发的时候遇到了一个问题.自己写好的json AIP 接口想通过点击相同的图片跳转到商品详情页面无法实现,几经周折后想到了 navigator 通过页面传参取json数据 ...
淘淘商城第77讲——实现商品详情页面展示
我相信大家通过上文的学习已经搭建好了商品详情页面展示工程,本文我将带领大家一起实现商品详情页面的展示. 首先我们来看一下商品详情页面的内容,可以看到商品一般属性在TbItem实体类中都是存在的,只是图 ...
微信小程序-控制文本的显示及隐藏（当文字超出两行时，设置为可点击并进入查看详情页面）
参考文章 1.微信小程序文本展开.收起功能 2.微信小程序文字超过行后隐藏并且显示省略号需求描述显示消息内容,超出两行部分隐藏.当有隐藏内容时,该卡片设为可点击,进入消息详情页面. 代码 1.wx ...
（仿头条APP项目）8.新闻详情页面实现和butterknife插件使用
文章目录 butterknife插件使用导入依赖下载插件使用新闻详情页面显示效果图实现思路具体实现布局数据库添加收藏表新闻详情页面具体业务逻辑实现详情页面跳转效果图具体实现步 ...
08 - 文章详情页面
文章详情页面 8-1:开篇从本章开始我们要进入文章详情的页面开发. 在文章详情页面可以展示: 文章标题作者信息发布时间文章内容文章评论同时你可以在这里进行: 作者关注文章评论文章点赞 ...
第三个页面：构建新闻详情页面
笔记内容:构建新闻详情页面笔记日期:2018-01-09 从文章列表跳转到新闻详情页(组件自定义属性及获取属性) 在编写从文章列表跳转到新闻详情页的代码之前,先来修改一下之前的页面,之前我们编写了两 ...
ionic：点击某个商品名称，跳转到相应的商品详情页面
实例: 在采购单审批页面(procurement),点击"商品名称"字段,跳到新的商品信息(goods-details)的详情页,其中商品信息通过点击的商品名称的id来查到: 首先 ...
小红书商品详情API接口（商品详情页面数据接口）
小红书商品详情API接口(商品详情页面数据接口)代码对接如下: 1.公共参数名称类型必须描述 key String 是调用key(必须以GET方式拼接在URL中,点击获取请求key和secr ...

点击商品进入详情页面

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

点击商品进入详情页面相关推荐

最新文章

热门文章