搜索与分页的前台代码

header.jsp 编写搜索框架事件

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript"> // 定义一个函数将搜索输入框的值进行获取 function searchRequest() { //获取输入框的值 var keyword = $("#searchInput").val() //判断 如果不为空，就发给显示页面 if (keyword != null && keyword.length > 0) { //将keyword传给搜索结果页面 window.location = 'http://localhost:8080/lvyou_war_exploded/search_result.jsp?keyword='+keyword }else{ //为空，提示用户，搜索词不能为空 alert('搜索词不能为空') } } </script>

search_result.jsp 编写

获取搜索关键字

（1）在header.jsp页面通过jq获取搜索框的搜索词，然后通过 url?k=v如 url?keyword=长沙传给search_result.jsp页面（2）在sarch_result.jsp页面通过location.search要获取地址上的参数keyword的值（3）location.search 获取请求地址的参数，如?keywrod=长沙 http://localhost:8080/lvyou_war_exploded/sarch_result.jsp?keywrod=长沙（4）调用ajax发送请求，接收返回的json数据（5）一个在线json工具网站：http://www.bejson.com/（6）前端字符串使用单引号，避免产生更多反斜杠 拼接也使用单引用 '+num+' //页面加载完成 $(function () { //http://localhost:8080/lvyou_war_exploded/search_result.jsp?keyword=长沙 //location表示整个地址 location.search指 ?keyword=长沙 //另外，浏览器会对地址栏的中文进行url编码 ?keyword=长沙 // split执行之后返回[?keyword,长沙] var array = location.search.split('=') //长沙 -》 长沙 var keyword = array[1] //解码 keyword = decodeURI(keyword) //加载数据 load(keyword,1,20) }) location.search 获取header.jsp发送过来的参数url编码与解码 keyword=window.decodeURI(keyword) decodeURI(keyword)将长沙 解码成长沙

发送请求获取json

function load( keyword, currentPage, pageSize) { //http://localhost:8080/lvyou_war_exploded/routeServlet?keyword=长沙¤tPage=1&pageSize=20 $.get('routeServlet', {keyword: keyword, currentPage: currentPage, pageSize: pageSize}, function (data) { if (data.code == 200) { var pb = data.data; //显示列表数据 showList(pb) //显示分页工具条数据 showTool(pb, keyword, currentPage, pageSize) } }, "json"); }

显示旅游路线的集合

function showList(pb) { //在哪里显示 //$("#route_list") var lis = '' for (var i = 0; i < pb.list.length; i++) { var route = pb.list[i] //显示成什么样 '+变量名+' var li = ' <li>\n' + ' <div class="img" ><img style="width: 299px;height: 169px" src="' + route.rimage + '" alt=""></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>' //拼接 lis += li } $("#route_list").html(lis) } 使用jq对集合进行循环使用html()对ul标签体内容进行修改字符串使用单引号字 符串拼接变量'+变量名+'

分页工具栏的显示与点击事件

（1）为什么要使用onClick="javascript:函数名()" 如果鼠标左键点击这句所在的标签 , 将触发函数名()（2）为什么要使用href=”javascript:void(0);” href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址，而void(0)表示一个空的方法，也就是不执行js函数。（3）img宽度调整 <div class="img"><img src="'+route.rimage+'" style="width: 299px"></div>（4）当前页按钮高亮 class="curPage"（5）下一页，上一页按钮宽度class="threeword"（6）引号转义 “ 或者 ’ 都需要在前面添加一个 οnclick="javascript:load(梅州,1,2) //抛出异常 οnclick="javascript:load(‘梅州’,1,2) //非变量 οnclick="javascript:load(’’+keyword+’’,1,2) //变量情况 function showTool(pb, keyword, currentPage, pageSize) { //只需要将pageBean里面的3个整数 $("#totalPage").html(pb.totalPage) $("#totalCount").html(pb.totalCount) var lis = '' //拼接第一，二按钮 lis += '<li><a href="javascript:load(\'' + keyword + '\',1,' + pageSize + ')">首页</a></li>' var min = currentPage - 1; if (min < 1) { min = 1 } lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + min + ',' + pageSize + ')">上一页</a></li>' for (var i = 1; i <= pb.totalPage; i++) { if (i == pb.currentPage) { //高亮 lis += ' <li class="curPage"><a href="javascript:load(\'' + keyword + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>' } else { lis += ' <li><a href="javascript:load(\'' + keyword + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>' } } //拼接倒数一，二按钮 var max = currentPage + 1; if (max > pb.totalPage) { max = pb.totalPage } lis += ' <li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + max + ',' + pageSize + ')">下一页</a></li>' lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + pb.totalPage + ',' + pageSize + ')">末页</a></li>' //显示在pageNum $("#pageNum").html(lis) } </script>

工具条的优化1

（1）当前页号是1，点击上一页，会越界（2）当前页号是totalPage，点击下一页，会越界 //拼接倒数一，二按钮 var max = currentPage + 1; if (max > pb.totalPage) { max = pb.totalPage } lis += ' <li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + max + ',' + pageSize + ')">下一页</a></li>'

var min = currentPage - 1; if (min < 1) { min = 1 } lis += '<li class="threeword"><a href="javascript:load(\'' + keyword + '\',' + min + ',' + pageSize + ')">上一页</a></li>'

工具条的优化2

（1）分析百度分页工具栏（2）有什么特点？ 》1：页数小于10个，比如5个，就展示5个 》2：页数不小于10个，固定显示10个页号（3）如何根当前页号计算开始与结束页号 》1：默认当页号高亮，前面是5个页号，后面是4个页号 》2：范围：前面页号最小是1，后面页号最大是totalPage 》3：固定10个页号，知道开始页号，可以通过+9得到结束，返之得到开始（3）调整页面位置 $("#pageNum").html(liList) window.scrollTo(0,0); var start = 0 var end = 0 //判断当前的页数是否有10页 if (pb.totalPage < 10) { start = 1; end = pb.totalPage }else{ //当前有10页 //如果当前页号是8 ，开始是3，结束是12 start = currentPage - 5; end = currentPage + 4 //越界判断 start有可能出现小于，end有可能出现大于pb.totalPage if(start < 1){ start = 1; //1 end = start + 9; //10 } if(end > pb.totalPage){ end = pb.totalPage //26 start = end - 9 //17 } } for (var i = start; i <= end; i++) { //... }