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>

<title>Insert title here</title>

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>

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>

<p>区域：

<p>户型：

<p>价格：

</div>

<tr>

</tr>

</table>

</div>

</body>

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();
}
}
}

AJAX实现导航式多条件搜索,布布扣,bubuko.com

时间： 2024-10-13 00:29:19

AJAX实现导航式多条件搜索

AJAX实现导航式多条件搜索的相关文章

Lucene系列：（10）多条件搜索 QueryParser

列表页的动态条件搜索

CI框架增加条件搜索，分页

【AmazeUI】各种的导航式菜单与解决方法

多条件搜索问题 -sql拼接与参数化查询

SQL Server通过条件搜索获取相关的存储过程等对象

全字段多条件搜索（api接口）

【转】仿Android 联系人SideBar排序，根据拼音A-Z字母快速导航，以及输入搜索条件过滤，显示姓名的文字图片

JavaScript AJAX stream 流式显示