搜索与分页的前台代码
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=%E9%95%BF%E6%B2%99
// split执行之后返回[?keyword,%E9%95%BF%E6%B2%99]
var array = location.search.split('=')
//长沙 -》 %E9%95%BF%E6%B2%99
var keyword = array[1]
//解码
keyword = decodeURI(keyword)
//加载数据
load(keyword,1,20)
})
- location.search 获取header.jsp发送过来的参数
- url编码与解码
keyword=window.decodeURI(keyword)
decodeURI(keyword)将%E9%95%BF%E6%B2%99 解码成长沙
发送请求获取json
function load( keyword, currentPage, pageSize) {
//http://localhost:8080/lvyou_war_exploded/routeServlet?keyword=%E9%95%BF%E6%B2%99¤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++) {
//...
}
