多条件搜索在平台网站或商城都是比较常见的，今天我们来说一说开发思路，先上效果图：
很多人在看到这个界面时立刻想到了使用后端PHP拼接URL实现多条件查询， 这很明显是个坑啊，不要问我为什么知道。 正常情况下，4个以下的条件使用PHP拼接一下查询条件还是没问题的，但是条件比较多时，有可能多达十几个甚至几十个条件，想想URL后面的参数清单都觉得可怕。
毫无疑问，今天我们要使用PHP+JS来实现：PHP负责后端数据查询，为前端程序提供数据接口；JS负责收集所有的查询条件并使用AJAX向PHP接口发起请求获取数据。
先看PHP示例代码：
//接收查询条件
$kongjian=$_POST['kongjian'];
$xilie=$_POST['xilie'];
$fongge=$_POST['fongge'];
$sexi=$_POST['sexi'];
$gongneng=$_POST['gongneng'];
$mianji=$_POST['mianji']; //面积查询条件
$price=$_POST['price']; //价格查询条件
$xingzhuang=$_POST['xingzhuang'];//形状
$zhuangtai=$_POST['zhuangtai'];//状态
$province=$_POST['province'];
$city=$_POST['city'];
$area=$_POST['area'];
$loupan=$_POST['loupan'];
$keywords=$_POST['keywords'];
$orderby=$_POST['orderby']; //控制排序
//按条件拼接SQL语句
$sql="select * from scheme where 1=1";
if($kongjian > 0) $sql.=" and kongjian=$kongjian";
if($xilie > 0) $sql.=" and xilie=$xilie";
if($fongge > 0) $sql.=" and guisheng=$fongge";
if($sexi > 0) $sql.=" and sexi=$sexi";
if($gongneng > 0) $sql.=" and gongneng like '-$gongneng-'";
if($xingzhuang > 0) $sql.=" and xingzhuang=$xingzhuang";
if($zhuangtai > 0) $sql.=" and zhuangtai=$zhuangtai";
//构造省市区楼盘和关键词条件
if($province > 0) $sql.=" and loupan_sheng=$province";
if($city > 0) $sql.=" and loupan_shi=$city";
if($area > 0) $sql.=" and loupan_qu=$area";
if($loupan > 0) $sql.=" and loupan_name=$loupan";
if(strlen($keywords) > 0) $sql.=" and title like '%$keywords%'";
$sql.=" order by $orderby desc";//排序
$rs=mysql_query($sql,$conn; //查询所有数据用于分页
//分页实现
$pagesize=16;
$page=$_GET['page'] ? $_GET['page'] : 1;
$pagecount=ceil(mysql_num_rows($rs)/$pagesize;
//获取了所有数据以后重新查询当前面数据
$start=($page-1)*$pagesize;
$sql.=" limit $start,$pagesize";
$rs=mysql_query($sql,$conn;
$data=array(); //用于构造最终数据的数组
while($row=mysql_fetch_assoc($rs)){
//提取个性化描述的文字
$row['intro']=retitle(preg_replace('/(\w+| )/','',strip_tags(htmlspecialchars_decode($row['intro']))),32;
$data[]=$row;
}
array_push($data,$pagecount); //发送数据之前将总页数装入
echo json_encode($data);
PHP实现的功能说明：
1. 接收客户端发到服务器的所有条件（多达十几项条件）数据
2. 判断条件是否有值，如果有值则证明客户端已提交，需要对该条件实行查询，将该条件拼接进查询SQL语句中。
3. 执行最终拼接好的SQL语句，获取到数据以后循环赋值给一个新数组
4. 将数组转换成JSON输出，即实现后端查询数据接口
接下来再看前端JS的代码段：
var config={ //初始化查询条件
kongjian:0,
xilie:0,
fongge:0,
sexi:0,
gongneng:0,
mianji:0,
price:0,
xingzhuang:0,
zhuangtai:0,
//省市区楼盘搜索
province:0,
city:0,
area:0,
loupan:0,
keywords:'',
//排序
orderby:'shangjia_time'
};
//刷新页面时加载所有数据
window.onload=function(){
showlist();
}
//获取列表数据
function showlist(page){
page=page||1;
$.post('./index_data.php?page='+page,config,function(data){
var pagecount=data.pop();
//渲染前端模板
$('#list').html( $('#list_tmpl').tmpl(data) );
//显示分页
var str='';
if(page>1){str+='<a href="javascript:showlist('+(page-1)+')">上一页</a>';}
for(var i=page-5; i<=page+5; i++){
if(i<1){continue;}
if(i>pagecount){break;}
var on= i==page ? 'class="on"':'';
str+='<a href="javascript:showlist('+i+')" '+on+'>'+i+'</a>';
}
if(page<pagecount){str+='<a href="javascript:showlist('+(page+1)+')">下一页</a>';}
$('.page').html(str);
});
}
//点击条件时
$('.main1').on('click','a',function(){
//设置搜索条件，并自动搜索
var key=$(this).data('name');
var value=$(this).data('id');
config[key]=value;
showlist(); //重新加载数据
//切换背景颜色块
$(this).siblings().attr('class','');
$(this).attr('class','on');
return false;
});
由于前端使用AJAX提交数据，可以实现用户选择一个条件就自动查询一次，及时显示结果有优秀体验。 前端的核心思想是：
1. 打开页面时，将所有的条件都初始化，具体实现就是定义一个全局的空对象，将所有条件及默认值都添加到空对象中保存起来。
2. 将用户选择了某条件时，就将全局对象中的该条件对应的属性值修改，并发起AJAX请求，将该全局对象中的值发送到后端实现查询。
3. 将查询到的结果显示到页面上。
以上代码只是项目中的一个代码段，不是完整可执行的，目的只是为了说明多条件查询的实现思路和原理，代码中有一些注释希望可以帮到大家理解思路。不过，从这个主题也可以看出，要实现一些用户体验好的效果往往需要前端JS和后端PHP充分的交流与紧密的合作。 如果有什么疑问欢迎交流探讨，我在源码时代等你哦。
标签： JS php
顶一下
(0)
0%
踩一下
(0)
0%
