导航式搜索在实际网站开发中有很多应用，其实现原理也不复杂，关键是如何记忆所选的条件。常见的方式有存入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,"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-generatedmethodstub
doPost(request,response);
}
/**
*@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)
*/
protectedvoiddoPost(HttpServletRequestrequest,IOException{
//TODOAuto-generatedmethodstub
request.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};//切分String，将各个值存入新数组中。
//Stringtoint
for(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();
}
}
} 原文链接：https://www.f2er.com/ajax/164901.html