如何使用laravel每隔x秒自动刷新div

Posted 2021-04-25

这可能是一个广泛的问题，但事情就是这样。我正在使用laravel，我有一个数据库通知，显示未读徽章（引导徽章）的数量以及读取和未读通知的列表。我希望能够每隔5秒左右刷新一次div。

到目前为止，我的刀片上的数据库通知代码（admin-master.blade.php）：

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <i class="lnr lnr-bullhorn"></i>
    <span class="badge badge-light">{{IlluminateSupportFacadesAuth::guard('admin')->user()->unreadNotifications()->count()}}</span>
    <i class="icon-submenu lnr lnr-chevron-down"></i>
  </a>
  <ul class="dropdown-menu">
                            @foreach(IlluminateSupportFacadesAuth::guard('admin')->user()->unreadNotifications as $notifications)

    <li>
      <a class="unreadNotifications" href="{{route('receptionist.markasread', $notifications->id)}}">{{$notifications->data['data']}}</a>
    </li>
                            @endforeach
                                @foreach(IlluminateSupportFacadesAuth::guard('admin')->user()->readNotifications()->take(4)->get() as $notifications)

    <li>
      <a class="readNotifications" href="/admin/roomstatus">{{$notifications->data['data']}}</a>
    </li>
                                @endforeach

  </ul>
</li>

所以我的问题是，我怎样才能用这个laravel来刷新整个div。我希望能够刷新徽章和实际通知。我已经看到一些关于堆栈溢出的帖子建议使用AJAX来“加载”html。我不确定如何用laravel实现这一目标。

谢谢

答案

好的，这就是我如何解决这个问题。

我使用jquery ajax来获取路由。路径进入控制器功能，通过视图。原始的问题代码在视图中。

这是我的AJAX：

function loadlink(){
        $('#reload').load('/loadNotification');
        console.log('TESTING!!!!');
    }

    loadlink();
    setInterval(function(){
        loadlink()
    }, 10000);

所以我每隔10秒刷新一次元素id。当然，如果您不想使用计时器，也可以监听任何数据库更改。在我的情况下，计时器适合我的需要。