首页 > 上网技巧 > 电脑小技巧 > PHP+JS多条件搜索的前后端实现

PHP+JS多条件搜索的前后端实现

时间:2018-08-02 10:36 作者:QQ地带 我要评论

多条件搜索在平台网站或商城都是比较常见的,今天我们来说一说开发思路,先上效果图:
 
 
很多人在看到这个界面时立刻想到了使用后端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%

Google提供的广告