点击页面导航栏位置“国内游”后,分页显示符合数据的数据列表。
由于线路数据过多需要使用分页技术展示数据。页面上显示的分页结果可以分为两部分,分页数据和分页条。所以,这个查询分两部分实现:
select * from tab_route limit n1,n2
。其中n1是起始记录数索引(startCount),n2是每页显示的数据量(pageSize); 由于分页功能实现结构比较复杂,我们学习需要分成静态分页实现、动态分页实现、优化PageBean工个步骤来实现。首先我们实现静态分页,所谓静态分页就是数据都是模拟的,并不是来自于数据库实现的分页效果模拟。
分页数据查询使用关键字limit
,需要两个参数:startCount
和 pageSize
。其中pageSize固定等于10,所以我们只需要考虑一个参数:startCount
。
但是,分页数据页面上传过来的是页数:pageNum
经过分析得出startCount的计算公式:startCount=(pageNum-1)*pageSize
。所以,前台传递参数pageNum
可实现分页查询。
SELECT * FROM tab_route;
# 每页显示10条数据(pageSize=10)
#第1页 起始条数startCount:0
SELECT * FROM tab_route LIMIT 0,10; #页数:1 -- 0
#第2页 起始条数startCount:10
SELECT * FROM tab_route LIMIT 10,10; #页数:2-- 10
#第3页 起始条数startCount:20
SELECT * FROM tab_route LIMIT 20,10; #页数:3 -- 20
# 结论: startCount = (pageNum-1)*pageSize;
修改route_list.html页面,绑定点击事件修改如下:
<ul>
<li><a href="">首页a>li>
<li class="threeword"><a href="#">上一页a>li>
<li><a href="javascript:;" onclick="getPageData(1,8)">1a>li>
<li><a href="javascript:;" onclick="getPageData(2,8)">2a>li>
<li><a href="javascript:;" onclick="getPageData(3,8)">3a>li>
<li><a href="javascript:;" onclick="getPageData(4,8)">4a>li>
<li><a href="javascript:;" onclick="getPageData(5,8)">5a>li>
<li><a href="javascript:;" onclick="getPageData(6,8)">6a>li>
<li><a href="javascript:;" onclick="getPageData(7,8)">7a>li>
<li><a href="javascript:;" onclick="getPageData(8,8)">8a>li>
<li><a href="javascript:;" onclick="getPageData(9,8)">9a>li>
<li><a href="javascript:;" onclick="getPageData(10,8)">10a>li>
<li class="threeword"><a href="javascript:;">下一页a>li>
<li class="threeword"><a href="javascript:;">末页a>li>
ul>
点击分页按钮后,触发函数getPageData(),在这个函数中发送请求,加载分页数据:
<script>
//加载分页数据
function getPageData(pageNum,pageSize) {
//发送异步请求加载分页数据
$.get("/routeServlet?methodName=routePageQuery",{pageSize:pageSize,pageNum:pageNum},function (pageData) {
console.log(pageData);
},"json");
}
</script>
【web层】接收和响应数据—RouteServlet.java
/**
* 分页查询路线
* @param request
* @param response
* @throws Exception
*/
public void routePageQuery(HttpServletRequest request,HttpServletResponse response) throws Exception {
//1.获取请求数据
String strPageSize = request.getParameter("pageSize");
String strPageNum = request.getParameter("pageNum");
//2.处理数据
String jsonPageData = routeService.pageQuery(strPageNum, strPageSize);
//3.响应数据
response.getWriter().println(jsonPageData);
}
【service层】RouteService.java
String pageQuery(String strPageNum, String strPageSize);
【service层】RouteServiceImpl.java
引入依赖:commons-lang3 处理字符串:
<dependency>
<groupId>org.apache.commonsgroupId>
<artifactId>commons-lang3artifactId>
<version>3.4version>
dependency>
/**
* 分页查询路线
* @param strPageNum
* @param strPageSize
* @return
*/
public String pageQuery(String strPageNum, String strPageSize) {
//处理请求数据
int pageNum = 1;
int pageSize = 10;
if (StringUtils.isNoneBlank(strPageNum)) {
pageNum = Integer.valueOf(strPageNum);
}
if (StringUtils.isNotBlank(strPageSize)) {
pageSize = Integer.valueOf(strPageSize);
}
//计算起始记录数
int startCount = (pageNum - 1) * pageSize;
//调用dao层查询数据
List<Route> routeList = routeDao.pageQuery(startCount, pageSize);
//封装数据并返回
Map<String, Object> pageResult = new HashMap<>();
pageResult.put("data", routeList);
String jsonPageData = JSON.toJSONString(pageResult);
return jsonPageData;
}
【dao层】RouteDao.java
List<Route> pageQuery(int startCount, int pageSize);
【dao层】RouteDaoImpl.java
/**
* 分页查询旅游线路
* @param startCount
* @param pageSize
* @return
*/
@Override
public List<Route> pageQuery(int startCount, int pageSize) {
String sql = "SELECT * FROM tab_route WHERE rflag = 1 LIMIT ?,?";
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), startCount, pageSize);
}
【前端】解析分页数据—route_list.html
第一步:删除页面死数据,给ul添加id
第二步:解析数据,填充页面
<script>
//加载分页数据
function getPageData(pageNum,pageSize) {
//发送异步请求加载分页数据
$.get("routeServlet?methodName=routePageQuery",{pageSize:pageSize,pageNum:pageNum},function (pageData) {
console.log(pageData);
if(pageData) {
//获取分页数据
var routeList = pageData.data;
var routeHtml = "";
//解析数据
$(routeList).each(function (index, route) {
routeHtml+= '\n' +
'
\n' +
'\n' +
''
+route.rname+'\n' +
'
\n' +
''
+route.routeIntroduce+'\n' +
'\n' +
'\n' +
'';
});
$("#routePageList").html(routeHtml);
}
},"json");
}
</script>
在上面的静态分页实现中,我们只在route_list.html写了10个a标签当做按钮。实际的页数可能不止10页,需要根据数据库中的数据量进行计算。
分页按钮栏中需要的数据:总页数 ,总记录数 。这两个数据需要通过后台的查询传递过来。具体实现如下:
【service层】RouteServiceImpl.java
在RouteServiceImpl的pageQuery方法中添加查询总记录数和计算总页数的逻辑。
【dao层】RouteDao.java
int queryTotalCount();
【dao层】RouteDaoImpl.java
/**
* @return
*/
@Override
public int queryTotalCount() {
String sql = "SELECT COUNT(*) FROM tab_route WHERE rflag=1 ";
Integer totalCount = null;
try {
totalCount = jdbcTemplate.queryForObject(sql, Integer.class);
} catch (DataAccessException e) {
totalCount = 0;
}
return totalCount;
}
【前端】解析分页数据
把总页数,总条数删除。分别给总页数和总条数的span添加id属性值。
【解析数据】
【动态生成分页按钮】
<script>
//页面加载完成后 默认查询第一页的数据
$(function () {
getPageData(1, 8);
});
//加载分页数据
function getPageData(pageNum,pageSize) {
//发送异步请求加载分页数据
$.get("routeServlet?methodName=routePageQuery",{pageSize:pageSize,pageNum:pageNum},function (pageData) {
console.log(pageData);
if(pageData) {
//获取分页数据
var routeList = pageData.data;
var routeHtml = "";
//解析数据
$(routeList).each(function (index, route) {
routeHtml+= '\n' +
'
\n' +
'\n' +
''
+route.rname+'\n' +
'
\n' +
''
+route.routeIntroduce+'\n' +
'\n' +
'\n' +
'';
});
$("#routePageList").html(routeHtml);
//拼接分页条
var totalCout = pageData.totalCount;
var totalPage = pageData.totalPage;
$("#totalCountSpan").html(totalCout);
$("#totalPageSpan").html(totalPage);
var pageLineHtml= '首页 \n' +
'上一页 ';
for (var i = 1;i<=totalPage;i++) {
if(pageNum == i){
pageLineHtml+='+i+',8)">'+i+' ';
}else{
pageLineHtml+='+i+',8)">'+i+' ';
}
}
pageLineHtml+='下一页 \n' +
' 末页 ';
$("#pageLine").html(pageLineHtml);
}
},"json");
}
</script>
【实现效果】
在上面的实现中,分页数据比较多的时候,生成的分页按钮太多,在页面上显示也不是太好。下面就仿照百度的分页条(总共显示10个分页按钮,前5后4)实现。
观察数字分页进行分析
显示的数字只要计算出起始页和结束页就可以显示出来,假如begin为起始页和end为结束也
将原来的遍历分页数字数据代码注释,在其下面添加如下代码:
【完整代码】route_list.html
<script>
$(function () {
getPageData(1, 8);
});
//加载分页数据
function getPageData(pageNum,pageSize) {
//发送异步请求加载分页数据
$.get("/routeServlet?methodName=routePageQuery",{pageSize:pageSize,pageNum:pageNum},function (pageData) {
console.log(pageData);
if(pageData) {
//获取分页数据
var routeList = pageData.data;
var routeHtml = "";
//解析数据
$(routeList).each(function (index, route) {
routeHtml+= '\n' +
'
\n' +
'\n' +
''
+route.rname+'\n' +
'
\n' +
''
+route.routeIntroduce+'\n' +
'\n' +
'\n' +
'';
});
$("#routePageList").html(routeHtml);
//拼接分页条
var totalCout = pageData.totalCount;
var totalPage = pageData.totalPage;
$("#totalCountSpan").html(totalCout);
$("#totalPageSpan").html(totalPage);
//动态生成分页按钮
var begin;
var end;
if(totalPage<10){
begin = 1;
end = totalPage;
}else{
begin = pageNum-5;
end = pageNum+4;
//控制起始按钮
if(begin<1) {
begin=1;
end=10;
}
//控制结束按钮
if(end>totalPage) {
end = totalPage;
begin=totalPage-9;
}
}
var pageLineHtml= '首页 \n' +
'上一页 ';
for (var i = begin;i<=end;i++) {
if(pageNum == i){
pageLineHtml+='+i+',8)">'+i+' ';
}else{
pageLineHtml+='+i+',8)">'+i+' ';
}
}
pageLineHtml+='下一页 \n' +
' 末页 ';
$("#pageLine").html(pageLineHtml);
}
},"json");
}
</script>
在RouteService的pageQuery方法中计算上一页和下一页,并将数据封装到pageResult中。
route_list.html中获取上一页和下一页数据,并将其拼接到a标签的链接中。
【首页和上一页】
var pageLineHtml= '<li><a href="javascript:;" onclick="getPageData(1,8)">首页a>li>\n' +
'<li class="threeword"><a href="javascript:;" onclick="getPageData('+prePage+',8)">上一页a>li>';
【下一页和末页】
pageLineHtml+='<li class="threeword"><a href="javascript:;" onclick="getPageData('+nextPage+',8)">下一页a>li>\n' +
' <li class="threeword"><a href="javascript:;" onclick="getPageData('+totalPage+',8)">末页a>li>';
$("#pageLine").html(pageLineHtml);
当我们点击导航栏上的线路类别查询线路时,页面应该根据路线的类别加载路线的分页数据。具体实现如下:
在header.html页面,动态拼接category列表数据时,url后面拼接cid。
$(function () {
//加载类别列表信息
$.get("categoryServlet?methodName=queryAllCategory",function (result) {
console.log(result);
//遍历categoryList数组
var categoryHtml = "首页 ";
if(result){
$(result).each(function (index, element) {
categoryHtml+=' + element.cid+'">'+element.cname+'';
});
}
categoryHtml+="收藏排行榜 ";
//把拼接的数据插入到ul中
$(categoryHtml).appendTo($("#categoryList"));
},"json");
});
当我们点击线路类别时,请求的地址如下:
当点击导航栏上的任意一个路线分类时,都会跳转到route_list页面,同时会将类别id—cid传递到route_list页面。所以,需要在route_list.html页面加载完成后,立即加载分页数据。
【前端】route_list.html
引入getParameter.js文件。使用getParameter方法,获取地址栏后面传入的参数。
页面跳转到route_list.html后,获取cid,将cid传递到分页查询的方法中作为一个条件:
分页查询方法:getPageData()增加一个参数 cid
【web层】RouteServlet.java
/**
* 分页查询路线
* @param request
* @param response
* @throws Exception
*/
public void routePageQuery(HttpServletRequest request,HttpServletResponse response) throws Exception {
//1.获取请求数据
String strPageSize = request.getParameter("pageSize");
String strPageNum = request.getParameter("pageNum");
String cid = request.getParameter("cid");
//2.处理数据
String jsonPageData = routeService.pageQuery(strPageNum, strPageSize,cid);
//3.响应数据
response.getWriter().println(jsonPageData);
}
【service层】RouteService.java
String pageQuery(String strPageNum, String strPageSize,String cid);
【service层】RouteServiceImpl.java
/**
* 分页查询路线
* @param strPageNum
* @param strPageSize
* @return
*/
public String pageQuery(String strPageNum, String strPageSize,String cid) {
//处理请求数据
int pageNum = 1;
int pageSize = 10;
if (StringUtils.isNotBlank(strPageNum)) {
pageNum = Integer.valueOf(strPageNum);
}
if (StringUtils.isNotBlank(strPageSize)) {
pageSize = Integer.valueOf(strPageSize);
}
//计算起始记录数
int startCount = (pageNum - 1) * pageSize;
//查询分页数据
List<Route> routeList = routeDao.pageQuery(startCount, pageSize,cid);
//查询总记录数
int totalCount = routeDao.queryTotalCount(cid);
//计算总页数
int totalPage = totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1;
//计算上一页
int prePage = pageNum==1?1:pageNum-1;
//计算下一页
int nextPage = pageNum==totalPage?totalPage:pageNum-1;
//封装数据并返回
Map<String, Object> pageResult = new HashMap<>();
pageResult.put("data", routeList);
pageResult.put("totalCount", totalCount);
pageResult.put("totalPage", totalPage);
pageResult.put("prePage", prePage);
pageResult.put("nextPage", nextPage);
String jsonPageData = JSON.toJSONString(pageResult);
return jsonPageData;
}
【dao层】RouteDao.java
【dao层】RouteDaoInpl.java
动态拼接查询条件和查询参数
点击网页头部搜索框输入旅游线路名称,点击搜索安全进行模糊搜索,符合条件的结果进行分页展现数据列表。
点击搜索框提交搜索内容跳转到rout_list.html并传递cid和搜索内容:给输入框添加id属性值searchKey,给按钮绑定点击事件searchByRname();
点击搜索后跳转到route_list.html页面,同时把请求参数cid和rname传递过去。
//根据关键字搜索
function searchByRname() {
//首先获取关键字
var rname = $("#rname").val();
alert("根据" + rname + "搜索");
//跳转到route_list.html即可
location.href = "route_list.html?rname=" + rname;
}
获取搜索内容数据,并提交到分页查询数据请求中,保证每个分页请求都要增加搜索内容提交请求参数。
修改route_list.html页面加载后的查询链接地址:getPageData方法中获取rname参数。
在RouteServlet.java中获取参数rname,并通过rname模糊查询数据。
获取总记录数据和当前页数据列表方法中增加搜索内容参数传递
/**
* 分页查询路线
* @param strPageNum
* @param strPageSize
* @return
*/
public String pageQuery(String strPageNum, String strPageSize,String cid,String rname) {
//处理请求数据
int pageNum = 1;
int pageSize = 10;
if (StringUtils.isNoneBlank(strPageNum)) {
pageNum = Integer.valueOf(strPageNum);
}
if (StringUtils.isNotBlank(strPageSize)) {
pageSize = Integer.valueOf(strPageSize);
}
//计算起始记录数
int startCount = (pageNum - 1) * pageSize;
//查询分页数据
List<Route> routeList = routeDao.pageQuery(startCount, pageSize,cid,rname);
//查询总记录数
int totalCount = routeDao.queryTotalCount(cid,rname);
//计算总页数
int totalPage = totalCount%pageSize==0?totalCount/pageSize:totalCount/pageSize+1;
//计算上一页
int prePage = pageNum==1?1:pageNum-1;
//计算下一页
int nextPage = pageNum==totalPage?totalPage:pageNum-1;
//封装数据并返回
Map<String, Object> pageResult = new HashMap<>();
pageResult.put("data", routeList);
pageResult.put("totalCount", totalCount);
pageResult.put("totalPage", totalPage);
pageResult.put("prePage", prePage);
pageResult.put("nextPage", nextPage);
String jsonPageData = JSON.toJSONString(pageResult);
return jsonPageData;
}
获取总记录数增加搜索内容数据条件过滤,获取当前页数据列表增加搜索内容数据条件过滤。
【代码】
List<Route> pageQuery(int startCount, int pageSize,String cid,String rname);
int queryTotalCount(String cid,String rname);
获取总记录数增加搜索内容数据条件过滤,获取当前页数据列表增加搜索内容数据条件过滤。
【查询分页数据】
/**
* 分页查询旅游线路
* @param startCount
* @param pageSize
* @return
*/
@Override
public List<Route> pageQuery(int startCount, int pageSize,String cid,String rname) {
// String sql = "SELECT * FROM tab_route WHERE rflag = 1 LIMIT ?,?";
// return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), startCount, pageSize);
//动态拼接sql
StringBuilder sb = new StringBuilder("SELECT * FROM tab_route WHERE rflag = 1 ");
//动态拼接查询参数
List<Object> params = new ArrayList<>();
if (StringUtils.isNotBlank(cid)) {
sb.append(" AND cid = ?");
params.add(cid);
}
if (StringUtils.isNotBlank(rname)) {
sb.append(" AND rname LIKE ?");
params.add("%" + rname + "%");
}
sb.append(" LIMIT ?,?");
params.add(startCount);
params.add(pageSize);
return jdbcTemplate.query(sb.toString(), new BeanPropertyRowMapper<>(Route.class), params.toArray());
}
【查询分页记录数】
@Override
public int queryTotalCount(String cid,String rname) {
// String sql = "SELECT COUNT(*) FROM tab_route WHERE rflag=1 ";
// Integer totalCount = null;
// try {
// totalCount = jdbcTemplate.queryForObject(sql, Integer.class);
// } catch (DataAccessException e) {
// totalCount = 0;
// }
// return totalCount;
//动态拼接sql
StringBuilder sb = new StringBuilder("SELECT COUNT(*) FROM tab_route WHERE rflag=1 ");
//动态拼接查询参数
List<Object> params = new ArrayList<>();
if (StringUtils.isNotBlank(cid)) {
sb.append(" AND cid = ?");
params.add(cid);
}
if (StringUtils.isNotBlank(rname)) {
sb.append(" AND rname LIKE ?");
params.add("%" + rname + "%");
}
try {
return jdbcTemplate.queryForObject(sb.toString(), Integer.class, params.toArray());
} catch (DataAccessException e) {
e.printStackTrace();
return 0;
}
}
header.html中,页面加载完成之后,获取URL中的rname。将其回显到搜索框中。
$(function () {
var rname = getParameter("rname");
if(rname) {
rname = decodeURI(rname);
//优化---将rname回显到搜索框中
$("#rname").val(rname);
}
});
点击route_list.html搜索列表中旅游线路的“查看详情”进入route_detail.html旅游线路详情页面并显示相关数据
route_list.html旅游线路列表页面中每个旅游线路的“查看详情”,点击请求跳转到route_detail.html旅游线路详情页面,并传递旅游线路标识符rid=X;
[外链图片转存失败(img-JNZLvdNn-1562519704443)(img/1537348995855.png)]
route_detail.html旅游线路详情页面获取传过来的rid数据,并提交异步请求到RouteServlet获取当前旅游线路对象数据,并传递action请求类型和rid线路的标识符数据。获取到web后端servlet返回的数据之后,进行解析将返回的数据更新数据到详情页面上指定的位置。
【前端】route_detail.html
引入getParameter.js文件
<script src="js/getParameter.js">script>
页面加载完成后,立即加载路线详情数据。
//在页面加载完成之后,根据rid查询线路详情
$(function () {
var rid = getParameter("rid");
//向后台发请求 rid
$.get("routeServlet?methodName=queryRouteDetail",{rid:rid},function(result){
console.log(result);
},"json");
});
RouteServlet是后端处理根据rid获的旅游线路对象数据的请求,首先获取rid数据,并调用业务类RouteService的
相关方法实现获取旅游线路数据业务。
/**
* 根据rid查询线路详情
* @param request
* @param response
* @throws IOException
*/
private void queryRouteDetail(HttpServletRequest request, HttpServletResponse response) throws IOException {
//1、接收请求数据
String rid = request.getParameter("rid");
//2、处理数据--查询
String detailJson = routeService.queryRouteDetailByRid(rid);
//3、响应数据--文本
response.getWriter().println(detailJson);
}
RouteService业务类根据传递过来的rid数据调用数据访问类RouteDao相关方法实现数据库获取Route旅游线路对
象数据,之后根据rid还要获取当前旅游线路的图片列表数据封装到Route对象中。最后返回Route对象给业务类
RouteService。
String queryRouteDetailByRid(String rid);
【实现类】
/**
* 根据rid查询线路详情
* @param rid
* @return
*/
@Override
public String queryRouteDetailByRid(String rid) {
//1、详情信息
Map<String,Object> detail = routeDao.queryDetailByRid(rid);
//2、详情图片查询
List<RouteImg> imgList = routeDao.queryImgByRid(rid);
detail.put("imgList", imgList);
//把map转换成JSON字符串
String jsonString = JSON.toJSONString(detail);
return jsonString;
}
RouteDao数据访问类根据rid获取tab_route表当前旅游线路数据、tab_category表当前旅游线路所属分类数据和
tab_route_img表当前旅游线路所属图片列表数据。
Map<String,Object> queryDetailByRid(String rid);
List<RouteImg> queryImgByRid(String rid);
【实现类】
/**
* 查询详情基本信息---多表关联查询
* @param rid
* @return
*/
@Override
public Map<String, Object> queryDetailByRid(String rid) {
String sql = "SELECT * FROM tab_route tbr INNER JOIN tab_category tbc ON tbr.cid=tbc.cid INNER JOIN tab_seller tbs ON tbr.sid=tbs.sid WHERE tbr.rid=?";
try {
Map<String, Object> map = jdbcTemplate.queryForMap(sql, rid);
return map;
} catch (DataAccessException e) {
return null;
}
}
/**
* 查询线路图片
* @param rid
* @return
*/
@Override
public List<RouteImg> queryImgByRid(String rid) {
String sql = "SELECT * FROM tab_route_img WHERE rid=?";
return jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(RouteImg.class),rid);
}
前端页面得到的数据格式如下,我们可以根据这个数据格式进行解析;
给上述死数据删除后,分别给span和p标签添加id属性值,以便填充数据:
【填充大图片】
//拼接大图片
var bigImgHtml = '
';
$("#bigImg").html(bigImgHtml);
【填充小图片】
//拼接小图片
var littleImgHtml = '';
var imgList = result.imgList;
$(imgList).each(function (index,element) {
if(index<=3){
littleImgHtml+=' \n' +
'
\n' +
' ';
}else{
littleImgHtml+=' +
'
\n' +
' ';
}
});
littleImgHtml+='';
$("#littleImg").html(littleImgHtml);
//触发图片动画
imgGo();
【注意】imgGo方法要定义在页面加载事件之外。
function imgGo() {
//焦点图效果
//点击图片切换图片
$('.little_img').on('mousemove', function() {
$('.little_img').removeClass('cur_img');
var big_pic = $(this).data('bigpic');
$('.big_img').attr('src', big_pic);
$(this).addClass('cur_img');
});
//上下切换
var picindex = 0;
var nextindex = 4;
$('.down_img').on('click',function(){
var num = $('.little_img').length;
if((nextindex + 1) <= num){
$('.little_img:eq('+picindex+')').hide();
$('.little_img:eq('+nextindex+')').show();
picindex = picindex + 1;
nextindex = nextindex + 1;
}
});
$('.up_img').on('click',function(){
var num = $('.little_img').length;
if(picindex > 0){
$('.little_img:eq('+(nextindex-1)+')').hide();
$('.little_img:eq('+(picindex-1)+')').show();
picindex = picindex - 1;
nextindex = nextindex - 1;
}
});
}
【填充其他信息】
//拼接详细信息--文字
$("#routeNameP").html(result.rname);
$("#routeIntroduceP").html(result.routeIntroduce);
$("#sellerNameP").html("商家名称:"+result.sname);
$("#sellerPhoneP").html("联系电话"+result.consphone);
$("#sellerAddrP").html("商家地址"+result.address);
$("#routeCountS").html("已收藏"+result.count+"次");
$("#routePriceS").html("¥"+result.price);
//种类
$("#categoryHtml").html(result.cname);
$("#headerRname").html(result.rname);
//在页面加载完成之后,根据rid查询线路详情
$(function () {
var rid = getParameter("rid");
//向后台发请求 rid
$.get("routeServlet?methodName=queryRouteDetail",{rid:rid},function(result){
console.log(result);
//拼接大图片
var bigImgHtml = '
';
$("#bigImg").html(bigImgHtml);
//拼接小图片
var littleImgHtml = '';
var imgList = result.imgList;
$(imgList).each(function (index,element) {
if(index<=3){
littleImgHtml+=' \n' +
'
\n' +
' ';
}else{
littleImgHtml+=' +
'
\n' +
' ';
}
});
littleImgHtml+='';
$("#littleImg").html(littleImgHtml);
imgGo();
//拼接详细信息--文字
$("#routeNameP").html(result.rname);
$("#routeIntroduceP").html(result.routeIntroduce);
$("#sellerNameP").html("商家名称:"+result.sname);
$("#sellerPhoneP").html("联系电话"+result.consphone);
$("#sellerAddrP").html("商家地址"+result.address);
$("#routeCountS").html("已收藏"+result.count+"次");
$("#routePriceS").html("¥"+result.price);
//种类
$("#categoryHtml").html(result.cname);
$("#headerRname").html(result.rname);
},"json");
});
function imgGo() {
//焦点图效果
//点击图片切换图片
$('.little_img').on('mousemove', function() {
$('.little_img').removeClass('cur_img');
var big_pic = $(this).data('bigpic');
$('.big_img').attr('src', big_pic);
$(this).addClass('cur_img');
});
//上下切换
var picindex = 0;
var nextindex = 4;
$('.down_img').on('click',function(){
var num = $('.little_img').length;
if((nextindex + 1) <= num){
$('.little_img:eq('+picindex+')').hide();
$('.little_img:eq('+nextindex+')').show();
picindex = picindex + 1;
nextindex = nextindex + 1;
}
});
$('.up_img').on('click',function(){
var num = $('.little_img').length;
if(picindex > 0){
$('.little_img:eq('+(nextindex-1)+')').hide();
$('.little_img:eq('+(picindex-1)+')').show();
picindex = picindex - 1;
nextindex = nextindex - 1;
}
});
}