6.15ajax选房子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="public/bootstrap/css/bootstrap.min.css">
    <script src="public/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="public/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style type="text/css">
        .sousuo{
            width: 100px;
            height: 30px;
            background-color: #117A8B;
            border-radius: 3px;
            text-align: center;
            line-height: 30px;
            color: white;
        }
        .sousuo:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    区域：<label><input type="checkbox"  onclick= "qx1(this)">全选</label><br />
        <label ><input type="checkbox" name="" class="qy" value="博山" />博山</label>
        <input type="checkbox" name=""  class="qy" value="沂源" />沂源
        <input type="checkbox" name="" class="qy" value="桓台" />桓台
        <input type="checkbox" name=""  class="qy" value="北京" />北京
        <input type="checkbox" name="" class="qy" value="上海" />上海
        <input type="checkbox" name=""  class="qy" value="南京" />南京<br />
        租赁类型：<input type="checkbox"  onclick= "qx2(this)" />全选<br />
        <input type="checkbox" name="" class="zl" value="合租" />合租
        <input type="checkbox" name="" class="zl" value="整租" />整租<br />
        房屋类型：<input type="checkbox" onclick= "qx3(this)" />全选<br />
        <input type="checkbox" name="" class="fw" value="3室1厅" />3室1厅
        <input type="checkbox" name="" class="fw"  value="平房" />平房
        <input type="checkbox" name="" class="fw"  value="2室1厅" />2室1厅
        <input type="checkbox" name="" class="fw"  value="筒子楼" />筒子楼
        <input type="checkbox" name="" class="fw"  value="1室1厅" />1室1厅
        <input type="checkbox" name="" class="fw"  value="4室2厅" />4室2厅<br />
        关键字：<input type="text" name="" id="gjz" value="" />
        <div class="sousuo" onclick="sousuo()">搜索</div>    
        <table border="1" cellspacing="0" cellpadding="0" class="table table-bordered">
        </table>
</body>
</html>
<script type="text/javascript">
    var tab = document.getElementsByTagName("table")[0];
    var qy = document.getElementsByClassName("qy");
    var zl = document.getElementsByClassName("zl");
    var fw = document.getElementsByClassName("fw");
    //loadData(‘‘,‘‘,‘‘,‘‘);//加载页面 
    sousuo();
    function loadData(tt,condition,condition1,condition2){
        $.ajax({
            type:"post",
            url:"zlcl.php",
            async:true,
            data:{
                "type":"chazhao",
                 "nm":tt,
                 "condition":condition,
                 "condition1":condition1,
                 "condition2":condition2
            },
            dataType:"json",
            success:function(data){
                var str ="";
                var str ="<td>序号</td><td>关键字</td><td>区域</td><td>面积</td><td>租金</td><td>租赁类型</td><td>房屋类型</td>";
                for(var i=0 ;i<data.length; i++){
                    str +="<tr>";
                    for(var j=0;j<data[i].length;j++){
            //如果查所有字段不用判断    if(j == 1){
                            str +="<td>"+data[i][j].replace(tt,"<span style=‘color:red;‘>"+tt+"</span>")+"</td>"; 
                        //}else{
                            //str +="<td>"+data[i][j]+"</td>"; 
                        //}
                    }
                    str +="</tr>";
                }
                tab.innerHTML = str;
            }
        });
    
    }
    function sousuo(){
        var condition = ‘‘;
        var quYu = $(".qy");
        for(var i=0;i<quYu.length;i++){
            if(quYu[i].checked == true){
                    condition +=‘ quyu="‘+$(quYu[i]).val()+‘" or‘;    
            }
        }
        condition = condition.substr(0,condition.length-2);
    
        //===================
        var condition1 =‘‘;
        var zulin = $(".zl");
        for(var j=0;j<zulin.length;j++){
            if(zulin[j].checked == true){
                condition1 +=‘ zulinlx="‘+$(zulin[j]).val()+‘" or‘;
            }
        }
        condition1= condition1.substr(0,condition1.length-2);
        //======================
        var condition2 =‘‘;
        var fangwu = $(".fw");
        for(var k=0;k<fangwu.length;k++){
            if(fangwu[k].checked == true){
                condition2 +=‘ fangwlx="‘+$(fangwu[k]).val()+‘" or‘;
            }
        }
        condition2= condition2.substr(0,condition2.length-2);
        var gjz = document.getElementById("gjz").value;
        loadData(gjz,condition,condition1,condition2);
    }        
    function qx1(t){
        for(var i=0;i<qy.length;i++){
            if(t.checked){
                qy[i].checked=true;
            }else{
                qy[i].checked=false;
            }
        }
        
    }
     function qx2(t){
        for(var i=0;i<zl.length;i++){
            if(t.checked){
                zl[i].checked=true;
            }else{
                zl[i].checked=false;
            }
        }
        
    }
     function qx3(t){
        for(var i=0;i<fw.length;i++){
            if(t.checked){
                fw[i].checked=true;
            }else{
                fw[i].checked=false;
            }
        }
        
    }
</script>

<?php
   $type = $_POST[‘type‘];
   $conn = new mysqli("localhost","root","","ceshi");
   $conn->connect_error?die("链接失败"):"";
   
   switch($type){
       case "chazhao":
             $nm = $_POST[‘nm‘];
             $condition = $_POST[‘condition‘];
             $condition1 = $_POST[‘condition1‘];
             $condition2 = $_POST[‘condition2‘];
             $condit = ‘ 1=1 ‘;
             
             if($nm != ‘‘){
                 $condit .=" and (name like ‘%{$nm}%‘ or quyu like ‘%{$nm}%‘) ";
             }
             if($condition != ‘‘){
                 $condit .= ‘and (‘. $condition.‘)‘;
                 //quyu="沂源"  select * from fwzl where ‘ 1=1 ‘and (name like ‘%{$nm}%‘ or quyu like ‘%{$nm}%‘)and quyu="沂源"
             }
             if($condition1 != ‘‘){
                 $condit .= ‘and (‘. $condition1.‘)‘;
             }
             if($condition2 != ‘‘){
                 $condit .= ‘and (‘. $condition2.‘)‘;
             }
             $sql = "select * from fwzl where $condit ";
             $result = $conn->query($sql);
             $attr = $result->fetch_all();
             echo json_encode($attr);
       break;
   }
?>

区域：全选
博山沂源桓台北京上海南京
租赁类型：全选
合租整租
房屋类型：全选
3室1厅平房 2室1厅筒子楼 1室1厅 4室2厅
关键字：

序号	关键字	区域	面积	租金	租赁类型	房屋类型
1	桓台空余	博山	100	1000	整租	3室1厅
2	沂源大产房	沂源	150	1599	合租	平房
3	桓台小道旁	桓台	200	500	合租	2室1厅
4	沂源大产房	张店	110	1200	整租	筒子楼
5	桓台小道旁	北京	80	2000	合租	4室2厅
6	博山空余	上海	90	3000	整租	1室1厅
7	博山空余	南京	300	5000	合租	筒子楼