AJAX实现导航式多条件搜索

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

效果图如下：

1.search.jsp

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

<%@ page language="java"  import="java.util.List;" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="css/web.css" type="text/css" media="all" />
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">var xmlHttp;function createXmlHttpRequest() {if (window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}}
//回调function handleStateChange() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {parseResults();}}}
//将后台返回的数据显示在层content中function parseResults() {document.getElementById("content").innerHTML=xmlHttp.responseText;//将返回的请
求文本Text写入指定的DIV中}
</script>
<script type="text/javascript">var req;var searchChar = new Array();for(var i=0;i<3;i++){searchChar[i]=0;}function bb(num,con){switch(num){case 0: searchChar[0]=con;break;case 1: searchChar[1]=con;break;case 2: searchChar[2]=con;break;}for(var i=0;i<13;i++){   //解决选中字段显示颜色的问题var region1 = "0" + i;document.getElementById(region1).style.color="black";}for(var i=0;i<5;i++){var type1 = "1" + i;document.getElementById(type1).style.color="black";}for(var i=0;i<5;i++){var price1 = "2" + i;document.getElementById(price1).style.color="black";}var region="0"+searchChar[0];document.getElementById(region).style.color="red";var type="1"+searchChar[1];document.getElementById(type).style.color="red";var price="2"+searchChar[2];document.getElementById(price).style.color="red";var url = "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>
<script type="text/javascript">var req;var searchChar = new Array();for(var i=0;i<3;i++){searchChar[i]=0;}function bb(num,con){switch(num){case 0: searchChar[0]=con;break;case 1: searchChar[1]=con;break;case 2: searchChar[2]=con;break;}for(var i=0;i<13;i++){   //解决选中字段显示颜色的问题var region1 = "0" + i;document.getElementById(region1).style.color="black";}for(var i=0;i<5;i++){var type1 = "1" + i;document.getElementById(type1).style.color="black";}for(var i=0;i<5;i++){var price1 = "2" + i;document.getElementById(price1).style.color="black";}var region="0"+searchChar[0];document.getElementById(region).style.color="red";var type="1"+searchChar[1];document.getElementById(type).style.color="red";var price="2"+searchChar[2];document.getElementById(price).style.color="red";var url = "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>
<body class="home">
<div id="search"><p>区域：<a id="00" href="javascript:void(0);" οnclick="bb(0,00)">全部</a><a id="01" href="javascript:void(0);" οnclick="bb(0,01)">市南</a><a id="02" href="javascript:void(0);" οnclick="bb(0,02)">市北</a><a id="03" href="javascript:void(0);" οnclick="bb(0,03)">李沧</a><a id="04" href="javascript:void(0);" οnclick="bb(0,04)">崂山</a><a id="05" href="javascript:void(0);" οnclick="bb(0,05)">城阳</a><a id="06" href="javascript:void(0);" οnclick="bb(0,06)">黄岛</a><a id="07" href="javascript:void(0);" οnclick="bb(0,07)">即墨市</a><a id="08" href="javascript:void(0);" οnclick="bb(0,08)">胶州市</a><a id="09" href="javascript:void(0);" οnclick="bb(0,09)">胶南市</a><a id="010" href="javascript:void(0);" οnclick="bb(0,10)">平度市</a><a id="011" href="javascript:void(0);" οnclick="bb(0,11)">莱西市</a><a id="012" href="javascript:void(0);" οnclick="bb(0,12)">其他</a></p><p>户型：<a id="10" href="javascript:void(0);" οnclick="bb(1,0)">全部</a><a id="11" href="javascript:void(0);" οnclick="bb(1,1)">住宅</a><a id="12" href="javascript:void(0);" οnclick="bb(1,2)">商用</a><a id="13" href="javascript:void(0);" οnclick="bb(1,3)">办公</a><a id="14" href="javascript:void(0);" οnclick="bb(1,4)">其他</a></p><p>价格：<a id="20" href="javascript:void(0);" οnclick="bb(2,0)">全部</a><a id="21" href="javascript:void(0);" οnclick="bb(2,1)">6000以下</a><a id="22" href="javascript:void(0);" οnclick="bb(2,2)">6000--8000</a><a id="23" href="javascript:void(0);" οnclick="bb(2,3)">8000--12000</a><a id="24" href="javascript:void(0);" οnclick="bb(2,4)">12000以上</a></p>
</div>
<div id="content" class="content"><table width="742"><tr><td>楼盘名</td><td>区域</td><td>户型</td><td>价格</td></tr></table>
</div>
</body>
<script type="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;
/**
* Servlet implementation class BuildingServlet
*/
@WebServlet("/BuildingServlet")
publicclassBuildingServlet extendsHttpServlet {
privatestaticfinallongserialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
publicBuildingServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protectedvoiddoGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
// TODO Auto-generated method stub
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {
// TODO Auto-generated method stub
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");//解决乱码问题,没有这句，回调函数的内容可能乱码
String searchcharg = request.getParameterValues("searchChar")[0].trim();//得到jsp页面数组的内容，但是以String形式。
String[] searchchars = searchcharg.split(",");
int[] searchchar = { 0, 0, 0, 0}; //切分String，将各个值存入新数组中。
//String to int
for(inti = 0; i < searchchars.length; i++) {
searchchar[i] = Integer.parseInt(searchchars[i]);
}
BuildingAction buildingaction=newBuildingAction();//根据jsp页面传来的每个条件的值，即可编写相应类查询出对应的结果。
List<Building> result=buildingaction.buildingSearch(searchchar[0], searchchar[1], searchchar[2]);
if(result.size()>0){
out.println("<table width='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("<table width='742'>"
+"<tr>"
+" <td> <span>没有相应信息 </span></td>"
+"</tr>"
+"</table>");
out.close();
}
}
}

转载于:https://blog.51cto.com/lindianli/1413201

AJAX实现导航式多条件搜索相关推荐

gorm 多条件搜索db处理问题
gorm 多条件搜索db处理问题问题描述 if phone != "" {db = db.Where("phone = ?", phone)}if userI ...
列表页的动态条件搜索
之前在搞.net的时候,我们可以借助强大的ExpressionTree来解决,之前有一篇是微软的EntityFramework表达式转换:Linq to Entity经验:表达式转换,是将一种表达式转 ...
浅谈导航数据中POI搜索技术原理
浅谈导航数据中POI搜索技术原理之一王健导航技术的应用已经成为现在生活中重要组成部分,为我们的生活提供了极大的便利.基本都有这样生活的体验,搜索自己位置附近的银行网点.餐馆.那么这些POI是如何快 ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
隐式图的搜索问题（九宫重排）——实验准备
隐式图的搜索问题(九宫重排)--实验准备隐式图的搜索问题(九宫重排) 实验任务实验要求 A*算法隐式图的搜索问题(九宫重排) 实验任务对九宫重排问题,建立图的启发式搜索求解方法. 用A*算法求 ...
2.隐式图的搜索问题
题目2:隐式图的搜索问题实验内容对九宫重排问题,建立图的启发式搜索求解方法: 用A*算法求解九宫重排问题. 实验要求 3х3九宫棋盘,放置数码为1~8的8个棋子,棋盘中留有一个空格,空格周围的棋子 ...
题目2：隐式图的搜索问题（实验准备）
题目2:隐式图的搜索问题(实验准备) 实验内容实验要求编程语言的选择项目思路项目解析算法选择 A*算法实验内容对九宫重排问题,建立图的启发式搜索求解方法: 用A*算法求解九宫重排问题. ...
Lucene系列：（10）多条件搜索 QueryParser
1.什么是条件搜索用关健字与指定的单列或多例进行匹配的搜索 2.单字段条件搜索 QueryParser queryParser = new QueryParser(LuceneUtils.getVe ...
Ajax弹出式无刷新城市选择特效
为什么80%的码农都做不了架构师?>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
利用Lucene.net搜索引擎进行多条件搜索的做法
1 联合两个索引查询,已解决: IndexSearcher[] searchers = new IndexSearcher[2]; searchers[0] = new IndexSearch ...

AJAX实现导航式多条件搜索

AJAX实现导航式多条件搜索相关推荐

最新文章

热门文章