Ajax无动态刷新搜索功能

作者: 寄去远方的盛夏 | 来源:发表于2017-12-04 10:04 被阅读21次

Ajax无动态刷新搜索功能
ajax
前端Ajax使用2018-5-18
Ajax+php 无刷新上传图片功能
Ajax无刷新分页
ajax异步无刷新
2018-03-19
javascript ajax
Ajax url中文参数问题
Javaweb-案例练习-2-给搜索框添加提示

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

image.png

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

<div class="tright">
  <ul>
    <li class="tnow">全部</li>
    <li>今天</li>
    <li>明天</li>
    <li>后天</li>
    <li>本月</li>
    <li>指定日期</li>
  </ul>
</div>

<div class="cright">
    <ul>
        <li class="citynow">全部</li>
        <li>北京</li>
        <li>上海</li>
        <li>苏州</li>
        <li>南京</li>
        <li>济南</li>
        <li>武汉</li>
        <li>江西</li>
        <li>石家庄</li>
        <li>保定</li>
        <li>南宁</li>
        <li>北海</li>
        <li>青岛</li>
        <li>桂林</li>
        <li>吉林</li>
        <li>浙江</li>
        <li>宁波</li>
    </ul>
</div>

<div class="lright">
    <ul>
        <li class="lxnow">全部</li>
        <li>户外活动</li>
        <li>IT</li>
        <li>创业</li>
        <li>亲子</li>
        <li>交友</li>
        <li>户外</li>
        <li>设计</li>
        <li>健康</li>
        <li>运动</li>
    </ul>
</div>

<div class="sxbox">
    <ol class="sx">
        <li class="active">默认</li>
        <span>|</span>
        <li>最新</li>
        <span>|</span>
        <li class="rdlr">
            <!--由冷门到热门-->
            <i class="fa fa-sort-amount-asc rdunow" title="由冷门到热门" aria-hidden="true">&nbsp;热度</i>
            <!--由热门到冷门-->
            <i class="fa fa-sort-amount-desc" title="由热门到冷门" aria-hidden="true">&nbsp;热度</i>
        </li>
        <span>|</span>
        <li>最多参与</li>
        <span>|</span>
        <li>只看免费</li>
    </ol>
</div>

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后，将查询要求发送到查询函数内（查询函数是自定义的），活动加过后，按显示要求处理结果字段，返回给前台