功能说明
- 点击“查看详情”后跳转到详情页面(route_detail.html)，并加载对应数据
示例
功能分析
- 点击“查看详情”后携带rid跳转到route_detail.htnl，在页面加载完成之后获取地址栏的rid，发送ajax请求，传递rid，获取对应的线路详情数据。
- 在后台接收请求之后，获取rid，查询获取数据。
- 将数据封装写回页面
- 页面接收到回调数据之后，在需要填充的位置加上id属性，利用jquery获取元素对象，填充数据
数据库结构
代码实现
前端
route_list.html
<p><a href="route_detail.html?rid='+data.list[i].rid+'">查看详情</a></p>
route_detail.html（忽略di属性设置）
<script>
$(function(){
var rid = getParameter("rid");
$.post("route/detail",{
rid:rid},function(data){
$("#header_category").html(data.category.cname);
$("#header_rname").html(data.rname);
$("#body_rname").html(data.rname);
$("#body_routeIntroduce").html(data.routeIntroduce);
$("#seller_sname").html(data.seller.sname);
$("#seller_consphone").html(data.seller.consphone);
$("#seller_address").html(data.seller.address);
$("#price").html("¥"+data.price);
$("#favoriteCount").html("已收藏"+data.count+"次");
var img_msg = '<dt>\n' +
' <img alt="" class="big_img" src="'+data.routeImgList[0].bigPic+'">\n' +
' </dt>\n' +
' <dd>\n' +
' <a class="up_img up_img_disable"></a>';
for(var i = 0; i < data.routeImgList.length; i++){
if(i >= 4){
img_msg += '<a title="" class="little_img" data-bigpic="'+data.routeImgList[i].bigPic+'" style="display: none">\n' +
' <img src="'+data.routeImgList[i].smallPic+'">\n' +
' </a>';
}else{
img_msg += '<a title="" class="little_img" data-bigpic="'+data.routeImgList[i].bigPic+'">\n' +
' <img src="'+data.routeImgList[i].smallPic+'">\n' +
' </a>';
}
}
img_msg += '<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>\n' +
' </dd>';
$("#imgs").html(img_msg);
goImg();
});
isFavorite(rid);
});
function isFavorite(rid){
$.get("route/isFavorite",{
rid:rid},function(info){
if(!info.flag){
$("#favorite").html('<a class="btn" οnclick="favorite()"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>');
}else{
$("#favorite").html('<a class="btn already" disabled="disabled"><i class="glyphicon glyphicon-heart-empty"></i>点击收藏</a>');
}
});
}
</script>
后端
RouteServlet
/**详情页展示
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
public void detail(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException{
String ridstr = req.getParameter("rid");
int rid = Integer.parseInt(ridstr);
Route route = routeService.detail(rid);
writeValue(resp,route);
}
/**
* 查看是否已收藏
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
public void isFavorite(HttpServletRequest req,HttpServletResponse resp) throws ServletException,IOException{
String ridstr = req.getParameter("rid");
int rid = Integer.parseInt(ridstr);
ResultInfo info = new ResultInfo();
User user = (User)req.getSession().getAttribute("user");
if(user == null){
info.setFlag(false);
writeValue(resp,info);
return;
}
Favorite favorite = routeService.findFavoriteByUid(rid,user.getUid());
if(favorite == null){
info.setFlag(false);
writeValue(resp,info);
}
writeValue(resp,favorite);
}
RouteServiceImpl
/**
* 商品详情查询
* @param rid
* @return
*/
@Override
public Route detail(int rid) {
Route route = routeDao.findRouteByRid(rid);
if(route == null){
return null;
}
int favoriteCount = routeDao.findFavoriteCount(rid);
route.setCount(favoriteCount);
Seller seller = routeDao.findSellerBySid(route.getSid());
route.setSeller(seller);
List<RouteImg> routeImgs = routeDao.findRouteImageByRid(rid);
route.setRouteImgList(routeImgs);
Category category = routeDao.findCategoryByCid(route.getCid());
route.setCategory(category);
return route;
}
/**
* 根据rid和uid查询收藏
* @param rid
* @param uid
* @return
*/
@Override
public Favorite findFavoriteByUid(int rid,int uid) {
Favorite favorite = favoriteDao.findFavoriteByUid(rid,uid);
return favorite;
}
RouteDaoImpl
/**
* 根据rid查询线路
* @param rid
* @return
*/
@Override
public Route findRouteByRid(int rid) {
Route route = null;
try{
String sql = "select * from tab_route where rid = ?";
route = template.queryForObject(sql, new BeanPropertyRowMapper<Route>(Route.class), rid);
}catch(Exception e){
e.printStackTrace();
}
return route;
}
/**
* 根据sid查询商家信息
* @param sid
* @return
*/
@Override
public Seller findSellerBySid(int sid) {
Seller seller = null;
try{
String sql = "select * from tab_seller where sid = ?";
seller = template.queryForObject(sql, new BeanPropertyRowMapper<Seller>(Seller.class), sid);
}catch(Exception e){
e.printStackTrace();
}
return seller;
}
/**
* 根据rid查询线路图片集
* @param rid
* @return
*/
@Override
public List<RouteImg> findRouteImageByRid(int rid) {
List<RouteImg> routeImgList = null;
try{
String sql = "select * from tab_route_img where rid = ?";
routeImgList = template.query(sql, new BeanPropertyRowMapper<RouteImg>(RouteImg.class), rid);
}catch(Exception e){
e.printStackTrace();
}
return routeImgList;
}
@Override
public Category findCategoryByCid(int cid) {
Category category = null;
try{
String sql = "select * from tab_category where cid = ?";
category = template.queryForObject(sql, new BeanPropertyRowMapper<Category>(Category.class), cid);
}catch(Exception e){
e.printStackTrace();
}
return category;
}
/**
* 根据rid查询收藏数量
* @param rid
* @return
*/
@Override
public int findFavoriteCount(int rid) {
Integer count = 0;
try{
String sql = "select * from tab_favorite where rid = ?";
count = template.queryForObject(sql, Integer.class, rid);
}catch(Exception e){
e.printStackTrace();
}
return count;
}
FavoriteDaoImpl
/**
* 根据rid和uid查询收藏
* @param rid
* @param uid
* @return
*/
@Override
public Favorite findFavoriteByUid(int rid, int uid) {
Favorite favorite = null;
try{
String sql = "select * from tab_favorite where rid = ? and uid = ?";
favorite = template.queryForObject(sql, new BeanPropertyRowMapper<Favorite>(Favorite.class), rid, uid);
}catch(Exception e){
e.printStackTrace();
}
return favorite;
}
完成