Ajax无动态刷新搜索功能

一,首先先讲前台的传值,因为要用到无动态刷新页面,所以不得不说一说ajax。ajax的无动态刷新真的好用
Ajax无动态刷新搜索功能_第1张图片
image.png

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

  • 全部
  • 今天
  • 明天
  • 后天
  • 本月
  • 指定日期
  • 全部
  • 北京
  • 上海
  • 苏州
  • 南京
  • 济南
  • 武汉
  • 江西
  • 石家庄
  • 保定
  • 南宁
  • 北海
  • 青岛
  • 桂林
  • 吉林
  • 浙江
  • 宁波
  • 全部
  • 户外活动
  • IT
  • 创业
  • 亲子
  • 交友
  • 户外
  • 设计
  • 健康
  • 运动
  1. 默认
  2. |
  3. 最新
  4. |
  5. |
  6. 最多参与
  7. |
  8. 只看免费

2,接下来讲的传值,因为搜索的每一个按钮按过后,必须给用户相应,所以给每一个按钮上添加了点击函数
get_time()函数里面this是当哪个按钮被点击,就获取哪个元素,首先先将变量赋值空。当按钮被点击的时候就对变量进行赋值


Ajax无动态刷新搜索功能_第2张图片

Ajax无动态刷新搜索功能_第3张图片

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

Ajax无动态刷新搜索功能_第4张图片
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后,将查询要求发送到查询函数内(查询函数是自定义的),活动加过后,按显示要求处理结果字段,返回给前台

你可能感兴趣的:(Ajax无动态刷新搜索功能)