6.15ajax选房子
发布时间:2020-12-16 03:04:13 所属栏目:百科 来源:网络整理
导读:!DOCTYPE htmlhtml 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
<!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,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页面 区域:
搜索
?
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |