Question

我目前正在处理显示用户活动日志的代码。 Ajax将调用路由并获取响应（json）结果。我需要能够在管理仪表板上显示日志记录，而无需刷新页面。

Ajax

console.log( Math.random().toString().slice(2, 15) + Math.random().toString().slice(2, 15) )

Answer 1

据我了解，您可以这样做：

$(document).ready(function() {
    var requesting = false;
    var request = function() { 
    requesting = true;
    $.ajax({
        type: 'get',
        url:"{{ route('users.activity') }}",
        dataType: 'json',
        success: function (data) {
            $.each(data, function() {
                $.each(this, function(index, value) {
                    console.log(value);
                    $('#activity').append('' +
                        '<div class="sl-item">' +
                        '<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
                        '<div class="sl-right">' +
                        '<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
                        '<div class="desc">' + value.description + '</div>' +
                        '</div>' +
                        '</div>');
                        requesting = false;
                });
            });
        },error:function(){
            console.log(data);
        }
    });
   };
  if(!requesting){
      setTimeout(request, 1000);
  }
 });

每隔一秒钟它就会向您的users.activity路由发出请求，因此每秒更新一次。

Answer 2

您需要发送服务器中的最后一条记录ID。因此您只能获取新数据。我根据@stackedo答案更新的答案。

$(document).ready(function () {
    var lastId = 0; //Set id to 0 so you will get all records on page load.
    var request = function () {
    $.ajax({
        type: 'get',
        url: "{{ route('users.activity') }}",
        data: { id: lastId }, //Add request data
        dataType: 'json',
        success: function (data) {
            $.each(data, function () {
                $.each(this, function (index, value) {
                    console.log(value);
                    lastId = value.id; //Change lastId when we get responce from ajax
                    $('#activity').append('' +
                        '<div class="sl-item">' +
                        '<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
                        '<div class="sl-right">' +
                        '<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
                        '<div class="desc">' + value.description + '</div>' +
                        '</div>' +
                        '</div>');

                });
            });
        }, error: function () {
            console.log(data);
        }
    });
    };
   setInterval(request, 1000);
});

在控制器中添加要查询的条件：

UserActivity::where('id','>',$request->id)->get();

Laravel和Ajax加载数据而不刷新页面

2 个答案: