AJAX实现导航式多条件搜索

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

创新互联建站主营鹤岗网站建设的网络公司,主营网站建设方案,app软件定制开发,鹤岗h5重庆小程序开发搭建,鹤岗网站营销推广欢迎鹤岗等地区企业咨询

效果图如下：

1.search.jsp

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

<%@ 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();
           }
   }
//回调
   function handleStateChange() {
       if (xmlHttp.readyState == 4) {
           if (xmlHttp.status == 200) {
               parseResults();
               }
           }
   }
//将后台返回的数据显示在层content中
   function parseResults() {
        document.getElementById("content").innerHTML=xmlHttp.responseText;//将返回的请
求文本Text写入指定的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++){   //解决选中字段显示颜色的问题
        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);
   }


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




   
区域：
       全部
       市南
       市北
       李沧
       崂山
       城阳
       黄岛
       即墨市
       胶州市
       胶南市
       平度市
       莱西市
       其他
   
户型：
       全部
       住宅
       商用
       办公
       其他
   
价格：
       全部
       6000以下
       6000--8000
       8000--12000
       12000以上