javascript - 如何使用 laravel 每 x 秒自动刷新一个 div

Question

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

这是迄今为止我的 Blade 上的数据库通知代码(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">{{\Illuminate\Support\Facades\Auth::guard('admin')->user()->unreadNotifications()->count()}}</span>
    <i class="icon-submenu lnr lnr-chevron-down"></i>
  </a>
  <ul class="dropdown-menu">
                            @foreach(\Illuminate\Support\Facades\Auth::guard('admin')->user()->unreadNotifications as $notifications)

    <li>
      <a class="unreadNotifications" href="{{route('receptionist.markasread', $notifications->id)}}">{{$notifications->data['data']}}</a>
    </li>
                            @endforeach
                                @foreach(\Illuminate\Support\Facades\Auth::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 中使用 JS 来刷新整个 div。我希望能够刷新徽章和实际通知。我看到一些关于堆栈溢出的帖子建议使用 AJAX 来“加载”html。我不确定如何使用 laravel 实现这一目标。

谢谢

Answer 1

好的，这就是我解决问题的方法。

我使用 jquery ajax 来获取路线。该路由转到传递 View 的 Controller 函数。原始问题代码位于 View 中。

这是我的 AJAX:

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

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

所以我每 10 秒只刷新该元素 id。当然，如果您不想使用计时器，您也可以监听任何数据库更改。就我而言，计时器适合我的需要。