<!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; ??}?>php页面
区域：
沂源桓台北京上海南京
租赁类型：全选
合租整租
房屋类型：全选
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 | 合租 | 筒子楼 |
6.15ajax选房子
原文地址：https://www.cnblogs.com/sunhao1987/p/9189373.html