导航式搜索在实际网站开发中有很多应用，其实现原理也不复杂，关键是如何记忆所选的条件。常见的方式有存入session、存入数组等。本文采用的是AJAX+数组的方式，在不跳转，不刷新整个页面的条件下动态返回查询结果。

效果图如下：

1.search.jsp

通过将所选的查询条件存入数组，通过AJAX传到后台，这样在后台利用所得到的查询条件，就可以到数据库进行查询了。代码如下：

<%@pagelanguage="java"import="java.util.List;"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><linkrel="stylesheet"rev="stylesheet"href="css/web.css"type="text/css"media="all"/><title>Inserttitlehere</title><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">varxmlHttp;functioncreateXmlHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}//回调functionhandleStateChange(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){parseResults();}}}//将后台返回的数据显示在层content中functionparseResults(){document.getElementById("content").innerHTML=xmlHttp.responseText;//将返回的请求文本Text写入指定的DIV中}</script><scripttype="text/javascript">varreq;varsearchChar=newArray();for(vari=0;i<3;i++){searchChar[i]=0;}functionbb(num,con){switch(num){case0:searchChar[0]=con;break;case1:searchChar[1]=con;break;case2:searchChar[2]=con;break;}for(vari=0;i<13;i++){//解决选中字段显示颜色的问题varregion1="0"+i;document.getElementById(region1).style.color="black";}for(vari=0;i<5;i++){vartype1="1"+i;document.getElementById(type1).style.color="black";}for(vari=0;i<5;i++){varprice1="2"+i;document.getElementById(price1).style.color="black";}varregion="0"+searchChar[0];document.getElementById(region).style.color="red";vartype="1"+searchChar[1];document.getElementById(type).style.color="red";varprice="2"+searchChar[2];document.getElementById(price).style.color="red";varurl="BuildingServlet";createXmlHttpRequest();xmlHttp.open("POST",url,true);xmlHttp.onreadystatechange=handleStateChange;//回调xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;text/xml;charset=utf-8");//text/xml;charset=utf-8：可以解决汉字封装json问题xmlHttp.send("searchChar="+searchChar);}</script><scripttype="text/javascript">varreq;varsearchChar=newArray();for(vari=0;i<3;i++){searchChar[i]=0;}functionbb(num,con){switch(num){case0:searchChar[0]=con;break;case1:searchChar[1]=con;break;case2:searchChar[2]=con;break;}for(vari=0;i<13;i++){//解决选中字段显示颜色的问题varregion1="0"+i;document.getElementById(region1).style.color="black";}for(vari=0;i<5;i++){vartype1="1"+i;document.getElementById(type1).style.color="black";}for(vari=0;i<5;i++){varprice1="2"+i;document.getElementById(price1).style.color="black";}varregion="0"+searchChar[0];document.getElementById(region).style.color="red";vartype="1"+searchChar[1];document.getElementById(type).style.color="red";varprice="2"+searchChar[2];document.getElementById(price).style.color="red";varurl="BuildingServlet";createXmlHttpRequest();xmlHttp.open("POST",url,true);xmlHttp.onreadystatechange=handleStateChange;//回调xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;text/xml;charset=utf-8");//text/xml;charset=utf-8：可以解决汉字封装json问题xmlHttp.send("searchChar="+searchChar);}</script></head><bodyclass="home"><divid="search"><p>区域：<aid="00"href="javascript:void(0);"onclick="bb(0,00)">全部</a><aid="01"href="javascript:void(0);"onclick="bb(0,01)">市南</a><aid="02"href="javascript:void(0);"onclick="bb(0,02)">市北</a><aid="03"href="javascript:void(0);"onclick="bb(0,03)">李沧</a><aid="04"href="javascript:void(0);"onclick="bb(0,04)">崂山</a><aid="05"href="javascript:void(0);"onclick="bb(0,05)">城阳</a><aid="06"href="javascript:void(0);"onclick="bb(0,06)">黄岛</a><aid="07"href="javascript:void(0);"onclick="bb(0,07)">即墨市</a><aid="08"href="javascript:void(0);"onclick="bb(0,08)">胶州市</a><aid="09"href="javascript:void(0);"onclick="bb(0,09)">胶南市</a><aid="010"href="javascript:void(0);"onclick="bb(0,10)">平度市</a><aid="011"href="javascript:void(0);"onclick="bb(0,11)">莱西市</a><aid="012"href="javascript:void(0);"onclick="bb(0,12)">其他</a></p><p>户型：<aid="10"href="javascript:void(0);"onclick="bb(1,0)">全部</a><aid="11"href="javascript:void(0);"onclick="bb(1,1)">住宅</a><aid="12"href="javascript:void(0);"onclick="bb(1,2)">商用</a><aid="13"href="javascript:void(0);"onclick="bb(1,3)">办公</a><aid="14"href="javascript:void(0);"onclick="bb(1,4)">其他</a></p><p>价格：<aid="20"href="javascript:void(0);"onclick="bb(2,0)">全部</a><aid="21"href="javascript:void(0);"onclick="bb(2,1)">6000以下</a><aid="22"href="javascript:void(0);"onclick="bb(2,2)">6000--8000</a><aid="23"href="javascript:void(0);"onclick="bb(2,3)">8000--12000</a><aid="24"href="javascript:void(0);"onclick="bb(2,4)">12000以上</a></p></div><divid="content"class="content"><tablewidth="742"><tr><td>楼盘名</td><td>区域</td><td>户型</td><td>价格</td></tr></table></div></body><scripttype="text/javascript">document.getElementById("00").style.color="red";document.getElementById("10").style.color="red";document.getElementById("20").style.color="red";</script></html>


2.BuildingServlet.java

得到jsp页面传来的数组，并解析得到对应的条件，调用相关的方法得到查询结果，并将结果返回给前台。

packagecom.realty.servlet;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.swing.JOptionPane;importcom.realty.base.model.*;importcom.realty.base.action.BuildingAction;/***ServletimplementationclassBuildingServlet*/@WebServlet("/BuildingServlet")publicclassBuildingServletextendsHttpServlet{privatestaticfinallongserialVersionUID=1L;/***@seeHttpServlet#HttpServlet()*/publicBuildingServlet(){super();//TODOAuto-generatedconstructorstub}/***@seeHttpServlet#doGet(HttpServletRequestrequest,HttpServletResponseresponse)*/protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//TODOAuto-generatedmethodstubdoPost(request,response);}/***@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)*/protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//TODOAuto-generatedmethodstubrequest.setCharacterEncoding("utf-8");response.setHeader("Cache-Control","no-store");response.setHeader("Pragma","no-cache");response.setDateHeader("Expires",0);response.setContentType("text/html;charset=UTF-8");//解决乱码问题,没有这句，回调函数的内容可能乱码Stringsearchcharg=request.getParameterValues("searchChar")[0].trim();//得到jsp页面数组的内容，但是以String形式。String[]searchchars=searchcharg.split(",");int[]searchchar={0,0,0,0};//切分String，将各个值存入新数组中。//Stringtointfor(inti=0;i<searchchars.length;i++){searchchar[i]=Integer.parseInt(searchchars[i]);}BuildingActionbuildingaction=newBuildingAction();//根据jsp页面传来的每个条件的值，即可编写相应类查询出对应的结果。List<Building>result=buildingaction.buildingSearch(searchchar[0],searchchar[1],searchchar[2]);if(result.size()>0){out.println("<tablewidth='742'>");//将结果返回给jsp页面out.println("<tr>"+"<td>楼盘名</td>"+"<td>区域</td>"+"<td>户型</td>"+"<td>价格</td>");out.println("</tr>");for(inti=0;i<result.size();i++){out.println("<tr>"+"<td><span>"+result.get(i).getBuildingName()+"</span></td>"+"<td><span>"+result.get(i).getRegionId()+"</span></td>"+"<td><span>"+result.get(i).getUsageId()+"</span></td>"+"<td><span>"+result.get(i).getAveragePrice()+"</span></td>"+"</tr>");}out.println("</table>");out.close();}else{out.println("<tablewidth='742'>"+"<tr>"+"<td><span>没有相应信息</span></td>"+"</tr>"+"</table>");out.close();}}}