fastadmin所有页面调用AJAX一例,有新消息或新订单提醒，有变更同时声音提醒

项目需要从控制器方法拿到最新的在线客服数据或者在用户操作时及时给系统提醒（比如有新咨询、新订单等），所以需要后台所有页面，都可以提示有最新信息，需要全局引用。我们的思路是在全部页面都能看到的是头部，左侧菜单等。把数据在这些地方显示出来。另外需要一个声音提示，只要在后台，有新消息时，声音提醒。很实用。

1、写好控制器方法

/**  * 获取在线客户咨询消息 lgocl/lurl    */

public function lurl($t=1)
{
    //写你的程序逻辑……重要数据放进变量
    $data['num']=$lpage;
    $data['url']=$url;
    $this->success("获取在线客服成功", "", $data);

}

2、我们是全局调用在左侧菜单的顶部，application\admin\view\common\menu.html，在‘菜单搜索’那里加入代码：

<!--加入在线客服实时-->
    <div class="l_kf" style="padding:10px;"><a id='lurl' href="#" target="_blank"> 新消息 <span class="badge" id="lbadge" style="background-color: red;">0</span></a> 
        <audio id="lvoide"><source src="/assets/kf.mp3" type="audio/mpeg"></audio>
        <!--<audio id="lvoide" controls autoplay><source src="/assets/kf.mp3" type="audio/mpeg"></audio>-->
    </div>

这里/assets/kf.mp3是你的提醒声音文件。class="badge"是fastadmin内置的CSS样式。

3、因为fastadmin后台是框架iframe区域结构的，找到后台首页的JS类，使用AJAX从控制器方法里拿到最新的数据。这里的所有的JS变量，都可以修改到前面的menu.html文件里的ID。

\public\assets\js\backend\index.js里，在index: function () {这个方法里，第一行直接加入代码：

-----------------------------------

©著作权归作者所有：来自51CTO博客作者和信立网络的原创作品，请联系作者获取转载授权，否则将追究法律责任

fastadmin所有页面调用AJAX一例,有新消息或新订单提醒，有变更同时声音提醒

//lgocl加载在线客服最新消息
      var laudio = document.getElementById('lvoide');
      setInterval(function (){
        Fast.api.ajax({
        url: "lgocl/lurl", 
        data: {"t":2}
      }, function(data, ret){
        console.log(data);//成功的回调
        $("#lbadge").html(data['num']);
        $("#lurl").attr("href",data['url']);
        if(parseInt(data['num'])>0){
          laudio.play();//播放提醒声音
        }else{
          laudio.pause();/*暂停*/
        }
      });
      }, 60000);//1分钟查一次

上面这里使用了Fast.api.ajax方法完成AJAX操作，fast是fastadmin特有的类，有JS类也有PHP类，使用大概是这样：

//发送一个Ajax请求，并手动处理成功的事件

Fast.api.ajax("ajax/test", function(data, ret){

    //data为使用$this->success("操作成功", "", $data);中$data的值

    //ret为{"code":1 "data":$data, "msg":"操作成功"}

});

setInterval定时执行这段JS代码，根据是否有获取到的新数据，自动播放和暂停声音的播放，从而有效的提醒新消息。

这里声音的播放目前有一个问题，在谷歌浏览器下，打开页面后，必须要点击一下页面，有消息时，play()才有效。如果你只是打开页面，鼠标没有在网页上有所操作过，不会自动提醒。这个应该是浏览器的自身的设计使用问题。

来一张我的成品图吧，大概是这样了。

-----------------------------------

©著作权归作者所有：来自51CTO博客作者和信立网络的原创作品，请联系作者获取转载授权，否则将追究法律责任

fastadmin所有页面调用AJAX一例,有新消息或新订单提醒，有变更同时声音提醒

https://blog.51cto.com/u_15638733/5294579