溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
導航式搜索在實際網站開發中有很多應用，其實現原理也不復雜，關鍵是如何記憶所選的條件。常見的方式有存入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);" onclick="bb(0,00)">全部</a>
<a id="01" href="javascript:void(0);" onclick="bb(0,01)">市南</a>
<a id="02" href="javascript:void(0);" onclick="bb(0,02)">市北</a>
<a id="03" href="javascript:void(0);" onclick="bb(0,03)">李滄</a>
<a id="04" href="javascript:void(0);" onclick="bb(0,04)">嶗山</a>
<a id="05" href="javascript:void(0);" onclick="bb(0,05)">城陽</a>
<a id="06" href="javascript:void(0);" onclick="bb(0,06)">黃島</a>
<a id="07" href="javascript:void(0);" onclick="bb(0,07)">即墨市</a>
<a id="08" href="javascript:void(0);" onclick="bb(0,08)">膠州市</a>
<a id="09" href="javascript:void(0);" onclick="bb(0,09)">膠南市</a>
<a id="010" href="javascript:void(0);" onclick="bb(0,10)">平度市</a>
<a id="011" href="javascript:void(0);" onclick="bb(0,11)">萊西市</a>
<a id="012" href="javascript:void(0);" onclick="bb(0,12)">其他</a></p>
<p>戶型：
<a id="10" href="javascript:void(0);" onclick="bb(1,0)">全部</a>
<a id="11" href="javascript:void(0);" onclick="bb(1,1)">住宅</a>
<a id="12" href="javascript:void(0);" onclick="bb(1,2)">商用</a>
<a id="13" href="javascript:void(0);" onclick="bb(1,3)">辦公</a>
<a id="14" href="javascript:void(0);" onclick="bb(1,4)">其他</a></p>
<p>價格：
<a id="20" href="javascript:void(0);" onclick="bb(2,0)">全部</a>
<a id="21" href="javascript:void(0);" onclick="bb(2,1)">6000以下</a>
<a id="22" href="javascript:void(0);" onclick="bb(2,2)">6000--8000</a>
<a id="23" href="javascript:void(0);" onclick="bb(2,3)">8000--12000</a>
<a id="24" href="javascript:void(0);" onclick="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();
}
}
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
