参数传递
header.html：（注意导入js/getParameter.js文件）
<!-- 头部 start -->
<script src="js/getParameter.js"></script>
<script>//给搜索按钮绑定单击事件，获取搜索输入框的内容
$("#search-button").click(function () {
//线路名称
var rname = $("#search_input").val();
var cid = getParameter("cid");
//跳转路径
location.href = "http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname;
});
});
</script>
route_list.html：（导入js/getParameter.js文件）
在将其修改
$(function () {
/*var search = location.search;
//切割字符串，拿到第二个值
var cid = search.split("=")[1];*/
//获取cid的参数值
var cid = getParameter("cid");
//获取rname的参数值
var rname = getParameter("rname");
//判断rname如果不为null或者""
if (rname){
//url解码
rname = window.decodeURIComponent(rname);
}
//当页码加载完成后，调用load方法，发送ajax请求加载数据
load(cid);
});
后台代码
RouteServlet进行修改：
RouteService：进行修改：
RouteServiceImpl：进行修改
UserDao：进行修改
UserDaoImpl：进行修改：（注意哪些拼接里面的空格）
public class RouteDaoImpl implements RouteDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public int findTotalCount(int cid, String rname) {
//String sql = "select count(*) from tab_route where cid = ?";
//定义SQL模板
String sql = "select count(*) from tab_route where 1=1 ";
//判断参数是否有值
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();//条件
if (cid!=0){
sb.append( " and cid = ? ");
params.add(cid);//添加?对应的值
}
if (rname !=null && rname.length()>0 && !"null".equals(rname)){
sb.append(" and rname like ? ");
params.add("%"+rname+"%");
}
sql = sb.toString();
return template.queryForObject(sql,Integer.class,params.toArray());
}
@Override
public List<Route> findByPage(int cid, int start, int pageSize, String rname) {
//String sql = "select * from tab_route where cid = ? limit ? , ?";
//定义SQL模板
String sql = "select * from tab_route where 1 = 1 ";
//判断参数是否有值
StringBuilder sb = new StringBuilder(sql);
List params = new ArrayList();//条件
if (cid!=0){
sb.append( " and cid = ? ");
params.add(cid);//添加?对应的值
}
if (rname !=null && rname.length()>0 && !"null".equals(rname)){
sb.append(" and rname like ? ");
params.add("%"+rname+"%");
}
sb.append(" limit ? , ? ");//分页条件
sql = sb.toString();
params.add(start);
params.add(pageSize);
return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),params.toArray());
}
}
访问测试：
前台代码
修改时要特别注意：
<script>
$(function () {
/*var search = location.search;
//切割字符串，拿到第二个值
var cid = search.split("=")[1];*/
//获取cid的参数值
var cid = getParameter("cid");
//获取rname的参数值
var rname = getParameter("rname");
//判断rname如果不为null或者""
if (rname){
//url解码
rname = window.decodeURIComponent(rname);
}
//当页码加载完成后，调用load方法，发送ajax请求加载数据
load(cid,null,rname);
});
function load(cid,currentPage,rname) {
//发送ajax请求，请求route/pageQuery，传递cid
$.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
//解析PageBean数据，展示到页面上
//分页工具条数据展示，展示总页码和总记录数
$("#totalPage").html(pb.totalPage);
$("#totalCount").html(pb.totalCount);
//展示分页页码
var lis = "";
var fristPage = '<li onclick="javascript:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
//计算上一页的页码
var beforeNum = pb.currentPage - 1;
if (beforeNum<=0){
beforeNum=1;
}
var beforePage = '<li onclick="javascript:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
lis+=fristPage;
lis+=beforePage;
/*
一共展示10个页码，能够达到前5后4的效果
如果前边不够5个，后边补齐10个
如果后边不足4个，前面补齐10个
*/
//定义开始位置begin，结束位置end
var begin; //开始位置
var end; //结束位置
//要显示10个页码
if (pb.totalPage <10){
//总页码不够10页
begin = 1;
end = pb.totalPage;
}else {
//超过10页
begin = pb.currentPage - 5;
end = pb.currentPage + 4;
//如果前边不够5个，后边补齐10个
if (begin < 1){
begin = 1;
end = begin + 9;
}
//如果后边不足4个，前面补齐10个
if (end > pb.totalPage){
end = pb.totalPage;
begin = end - 9;
}
}
for (var i = begin; i <=end ; i++) {
//判断当前页码是否等于i
var li;
if (pb.currentPage == i){
li = '<li class="curPage" onclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
}else {
//创建页码的li
li = '<li onclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
}
//拼接字符串
lis+=li;
}
var nextNum = pb.currentPage+1;
if (nextNum>=pb.totalPage){
nextNum = pb.totalPage;
}
var lastPage = '<li onclick="javascript:load('+cid+','+nextNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
var nextPage = '<li onclick="javascript:load('+cid+','+pb.totalPage+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
lis+=lastPage;
lis+=nextPage;
//将lis内容设置到ul
$("#pageNum").html(lis);
//2.列表数据展示
var route_lis = "";
for (var i = 0; i <pb.list.length; i++) {
//获取
var route = pb.list[i];
var li = '<li>\n' +
' <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +
' <div class="text1">\n' +
' <p>'+route.rname+'</p>\n' +
' <br/>\n' +
' <p>'+route.routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+route.price+'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html">查看详情</a></p>\n' +
' </div>\n' +
' </li>';
route_lis+=li;
}
$("#route").html(route_lis);
//定位到页面的顶部
window.scrollTo(0,0);
});
}
</script>
点击搜索
就有相关的信息
搜索
复制
标签：rname,cid,route,lis,查询,pb,旅游网,var,黑马 From： https://www.cnblogs.com/pengtianyang/p/16625180.html