参数传递
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