• PHP使用AJax轮询实现新订单实时提醒


    业务逻辑:Ajax每隔10秒钟请求一次接口,该接口会去查询数据库是否有新的订单,如果有则返回新订单的数量,后台收到声音提示,更改后台提醒数量

                     提醒框可链接到订单列表,后台更改完订单状态后会提醒会消失

                     此逻辑同样可用于实现后台通知功能,用定时任务也可以实现

                     

    1、JS代码

    <audio id="mp3" src="/admin/mp3/remind.mp3"> </audio>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            var remind = 1;
            var mp3 = $("#mp3")[0];
            var play= 0;
           
            if(sessionStorage.num){
                $(".remind").text(sessionStorage.num);
            }
    
            $.ajax({
                url:"/sendOrderNotice",
                success:function (data) {
                    sessionStorage.num = data;
                    $(".remind").text(data);
                    remind = data;play=data;
                    remind<=0?$(".remind").hide():$(".remind").show();
    
                }
            })
    
    
            setInterval(function () {
                $.ajax({
                    url:"/sendOrderNotice",
                    success:function (data) {
                        remind = data;
                        sessionStorage.num = data;
                        if(play==remind){
                            remind<=0?$(".remind").hide():$(".remind").show()
                        }else{
                            $(".remind").show().text(remind);
                            mp3.play();
                            play=remind;
                        }
                    }
                })
            },10000)
    </script>

     2、php接口

    /**
         * 订单提醒
         */
        public function sendOrderNotice(){
            //查询order表是否有新订单
            $NewOderCount=Order::getNewOderCount();
            if ($NewOderCount) {
                echo json_encode($NewOderCount);
            } else {
                echo 0;
            }
        }
  • 相关阅读:
    正则表达式
    git指令
    前端测试 Jest/(Mocha) Typescript/Javascript Vueunitstest
    mpvue使用wxcharts.js显示各类图表
    css margintop 失效
    reduce 黑科技
    vue cli 项目创建
    css实现垂直水平居中
    MySQL基础教程之存储过程
    4组Alpha冲刺2/6
  • 原文地址:https://www.cnblogs.com/lamp01/p/7065792.html
Copyright © 2020-2023  润新知