黑马旅游网编写练习(8)–旅游线路查询功能
用户可以通过点击分类目录来查询旅游路线,当然也可以直接通过搜索框进行搜索。接下来便进行搜索框搜索并展示功能的编写。
分析
点击搜索框也是对数据库中旅游路线表tab_route进行查询,而在RouteDao中,之前已经编写了一个查询tab_route表中数据的方法;在service层也有了将查询到的数据进行分页展示的方法。接下来可以在dao层重载一个方法,在该方法中增加一个搜索框的数据String类型;而在service层,可以直接添加参数,也可以重载一个页面查询方法;为了减少代码的重复,****在service层,便直接增加参数。****而在dao层进行方法的重载。
前端参数分析
旅游路线的搜索框是一直存在的,用户可以在主页直接搜索;也可以在点击了下面的某一个旅游分类后再进行搜索;还可以在某一个旅游路线的详细界面进行搜索;不管在那个页面进行了搜索,我们都让其跳转到旅游页面展示界面,即route_list.html页面。该页面会自动向服务器发送Ajax请求,获取旅游路线,并分页展示。由于是搜索,所以我们需要将搜索框的内容也传递给服务器,所以在页面跳转时,需要传递搜索框的内容search_input;由于route_list.html页面中cid是通过请求路径获取的,所以在跳转到此页面时,也需要将cid参数一起传递过来。
header.html中点击搜索框的代码如下:
// 为搜索框绑定单击事件
$(".search-button").click(function () {
// 获取cid,获取search_input
var cid = getParameter("cid");
var search_input = $(".search_input").val();
// 跳转到route_list页面
location.href="http://localhost/travel/route_list.html?cid="+cid+"&search_input="+search_input;
});
然后在route_list.html页面接收这两个参数,并将Ajax请求中添加一个参数。接收时,因为可能有中文,所以需要进行url解码
// 根据请求当前资源的路径获取cid
// http://localhost/travel/route_list.html?cid=7
var cid = getParameter("cid");
var search_input = getParameter("search_input");
// url解码
search_input = window.decodeURIComponent(search_input);
注意,在Ajax请求中添加了参数后,需要在所有调用该方法的地方都加上一个参数。注意!在页码处拼接字符串时,搜索的内容是字符串,所以要加上引号;否则参数传不成功。
dao层查询方法的重载
加入了搜索,所以需要设置sql拼接,不管是只根据搜索值,还是只根据cid,还是两个一起,都能实现查询;首先重载findTotalCount方法,具体代码如下:
/**
* 根据cid,或者search_input查询指定目录下的数据总条数
* @param cid
* @param search_input
* @return
*/
@Override