php ajax 搜索功能,Ajax无动态刷新搜索功能

一,首先先讲前台的传值,因为要用到无动态刷新页面,所以不得不说一说ajax。ajax的无动态刷新真的好用

image.png

1，首先先讲前台HTML模板的布局

• 全部
• 今天
• 明天
• 后天
• 本月
• 指定日期

• 全部
• 北京
• 上海
• 苏州
• 南京
• 济南
• 武汉
• 江西
• 石家庄
• 保定
• 南宁
• 北海
• 青岛
• 桂林
• 吉林
• 浙江
• 宁波

• 全部
• 户外活动
• IT
• 创业
• 亲子
• 交友
• 户外
• 设计
• 健康
• 运动

1. 默认

|

最新

|

 热度

 热度

|

最多参与

|

只看免费

2，接下来讲的传值，因为搜索的每一个按钮按过后，必须给用户相应，所以给每一个按钮上添加了点击函数

get_time()函数里面this是当哪个按钮被点击，就获取哪个元素，首先先将变量赋值空。当按钮被点击的时候就对变量进行赋值

3，当搜索按钮被点击时，则向post内的URL发送上面变量获取到的参数，如果成功则执行function函数data形参内会携带参数，将参数拼接HTML样式，重复赋值给HTML变量，然后对下面的UL标签内动态写入Li的样式

image.png

4，因为当页面刚进来时，也要加载默认的显示列表，所以用到JQ的当页面加载完毕后执行的函数

$(document).ready(function(){ },这样讲刚才的添加HTML的功能放在函数体内，当用户进入页面后，就会将默认的参数发送到后台

二，接下来是后台PHP出来前台传的数据

1，因为用的是Thinkphp5的框架，该框架自定义了很多助手函数非常好用

//用TP5 inpu()助手函数获取request内的参数给变量

$param = input('request.');

$data='';

因为是获取时间段内的数据，所以用时间戳查询

//按照普通格式时间存,查的时候用link查,右%模糊,左面一致,如此用户在搜索的时候右面必选，统一赋值在$data内，最后直接return$data便可以将值全部传到前台

if(!empty($param['time'])){

switch ($param['time'])

{

case 1:

//查询指定日期mysql语句 查询今天开始和结束的时间戳转换后查询

//查询三天内时间戳

$dayTime = strtotime(date('Y-m-d'.'00:00:00',time()));

$threeTime = strtotime(date('Y-m-d'.'00:00:00',time()+3600*48));

$data["starttime"]=array('between',[$dayTime,$threeTime]);

break;

case 2:

//获取一周内

$timestamp = time();

$monDay = strtotime(date('Y-m-d', strtotime("this week Monday", $timestamp)));

$weekDay = strtotime(date('Y-m-d', strtotime("this week Sunday", $timestamp))) + 24 * 3600 - 1;

$data["starttime"]=array('between',[$monDay,$weekDay]);

break;

case 3:

//获取一个月开始和结束时间戳

$monthStart = mktime(0, 0, 0, date('m'), 1, date('Y'));

$monthend = mktime(23, 59, 59, date('m'), date('t'), date('Y'));

//查询后天开始和结束的时间戳转换后查询

$data["starttime"]=array('between',[$monthStart,$monthend]);

break;

}

}

//获取城市

if(!empty($param['city'])){

$data["disctirctId"]=$param['city'];

}

//获取类型

if(!empty($param['type'])){

$data["type"]=$param['type'];

}

//获取排序

$order = 'id ASC';

if(!empty($param['order'])){

switch ($param['order'])

{

case 1:

//检索最新

$order='id DESC';

break;

case 2:

//检索最热

$order='hots DESC';

break;

case 3:

//检索最冷

$order='hots ASC';

break;

case 4:

//检索人数最多

$order='total DESC';

break;

case 5:

//检索免费

$order='0';

break;

}

}

2，要查询的数据都已经赋值$data后，将查询要求发送到查询函数内(查询函数是自定义的)，活动加过后，按显示要求处理结果字段，返回给前台