AJAX实现导航式多条件搜索

发布时间：2020-12-16 00:33:42 所属栏目：百科来源：网络整理

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

导航式搜索在实际网站开发中有很多应用，其实现原理也不复杂，关键是如何记忆所选的条件。常见的方式有存入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();
}
}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!