導(dǎo)航式搜索在實(shí)際網(wǎng)站開(kāi)發(fā)中有很多應(yīng)用，其實(shí)現(xiàn)原理也不復(fù)雜，關(guān)鍵是如何記憶所選的條件。常見(jiàn)的方式有存入session、存入數(shù)組等。本文采用的是AJAX+數(shù)組的方式，在不跳轉(zhuǎn)，不刷新整個(gè)頁(yè)面的條件下動(dòng)態(tài)返回查詢(xún)結(jié)果。

創(chuàng)新互聯(lián)建站主營(yíng)鶴崗網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開(kāi)發(fā),鶴崗h5重慶小程序開(kāi)發(fā)搭建,鶴崗網(wǎng)站營(yíng)銷(xiāo)推廣歡迎鶴崗等地區(qū)企業(yè)咨詢(xún)

效果圖如下：

1.search.jsp

   通過(guò)將所選的查詢(xún)條件存入數(shù)組，通過(guò)AJAX傳到后臺(tái)，這樣在后臺(tái)利用所得到的查詢(xún)條件，就可以到數(shù)據(jù)庫(kù)進(jìn)行查詢(xún)了。代碼如下：

<%@ page language="java"  import="java.util.List;" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>








   var xmlHttp;
   function createXmlHttpRequest() {
       if (window.ActiveXObject) {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
       } else if (window.XMLHttpRequest) {
           xmlHttp = new XMLHttpRequest();
           }
   }
//回調(diào)
   function handleStateChange() {
       if (xmlHttp.readyState == 4) {
           if (xmlHttp.status == 200) {
               parseResults();
               }
           }
   }
//將后臺(tái)返回的數(shù)據(jù)顯示在層content中
   function parseResults() {
        document.getElementById("content").innerHTML=xmlHttp.responseText;//將返回的請(qǐng)
求文本Text寫(xiě)入指定的DIV中
   }


   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++){   //解決選中字段顯示顏色的問(wèn)題
        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;//回調(diào)
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;text/xml;charset=utf-8"); //text/xml;charset=utf-8：可以解決漢字封裝json問(wèn)題
       xmlHttp.send("searchChar="+searchChar);
   }


   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++){   //解決選中字段顯示顏色的問(wèn)題
        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;//回調(diào)
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;text/xml;charset=utf-8"); //text/xml;charset=utf-8：可以解決漢字封裝json問(wèn)題
       xmlHttp.send("searchChar="+searchChar);
   }




   
區(qū)域：
       全部
       市南
       市北
       李滄
       嶗山
       城陽(yáng)
       黃島
       即墨市
       膠州市
       膠南市
       平度市
       萊西市
       其他
   
戶(hù)型：
       全部
       住宅
       商用
       辦公
       其他
   
價(jià)格：
       全部
       6000以下
       6000--8000
       8000--12000
       12000以上