代码之家 › 专栏 › 技术社区 › Nabil Farhan

如何在laravel视图中自动更新数据?

laravel-5 laravel

Nabil Farhan · 技术社区 · 6 年前

我的控制器功能是

public function list()
{
    $tasks= Task::where('category','1')->get();
    //category is 1 when the task is important
    return view('important', compact('tasks'));
}

我的观点是

<ul>    
@foreach ($tasks as $task)  
    <li> {{$task->body}}</li>
@endforeach
</ul>

2 回复 | 直到 6 年前

Saurabh Mistry 6 年前

在web.php中

Route::get('/tasks','TasksController@list')->name('get_tasks');

在控制器内部:

use Illuminate\Http\Request;

public function list(Request $request)
{
    $tasks= Task::where('category','1')->get();
    if($request->ajax()){
       return response()->json(array('tasks'=>$tasks));
    }
    return view('important', compact('tasks'));
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
   $(document).ready(function(){
       setInterval(function(){
          $.ajax({
             url:'/tasks',
             type:'GET',
             dataType:'json',
             success:function(response){
                if(response.tasks.length>0){
                   var tasks ='';
                   for(var i=0;i<response.tasks.length;i++){
                      tasks=tasks+'<li>'+response.tasks[i]['body']+'</li>';
                   }
                   $('#tasklist').empty();
                   $('#tasklist').append(tasks);
                }
             },error:function(err){

             }
          })
       }, 5000);
   });
</script>



    <ul id="tasklist">    
        @foreach ($tasks as $task)  
        <li> {{$task->body}}</li>
       @endforeach
    </ul>

Khan Shahrukh 6 年前

为了实现这种设置,您可以使用Pusher或任何其他类似的提供商,一旦您注册Pusher,您可以每天免费发送200k通知,您可以在登录Pusher后检查限制。在我们继续之前,请安装pusher的官方php包

composer require pusher/pusher-php-server

从您的推送仪表板获取 app_id key , secret 和 cluster

//You will get cluster name from pusher.com replace it below
    $options = ['cluster' => 'mt1', 'encrypted' => true];

   //Replace your key, app_id and secret in the following lines 
    $pusher = new Pusher(
        'key',
        'secret',
        'app_id',
        $options
    );

    //this could be a single line of message or a json encoded array, in your case you want to pass some data to display in table I assume you have an array 
    $message= json_encode(['name' => 'John doe', 'age' => 42, 'etc' => 'etc']);

    //Send a message to users channel with an event name of users-list. Please mind this channel name and event name could be anything but it should match that with your view 
    $pusher->trigger('users', 'users-list', $message);

现在在你看来 </body> 标记粘贴以下代码

<!-- Incldue Pusher Js -->
<script src="https://js.pusher.com/4.2/pusher.min.js"></script>
<script>
//Remember to replace key and cluster with the credentials that you have got from pusher.
var pusher = new Pusher('key', {
  cluster: 'mt1',
  encrypted: true
});

//In case you have decided to use a different channel and event name in your controller then change it here to match with the one that you have used
var channel = pusher.subscribe('users');
channel.bind('users-list', function(message) {
//if you will console.log(message) at this point you will see the data 
//that was sent from your controller is available here please consume as you may like 
    alert(message);
});

</script>