如何在不重新加载 laravel 8 页面的情况下刷新数据答案

【问题标题】：How to refresh data without reloading page in laravel 8如何在不重新加载 laravel 8 页面的情况下刷新数据
【发布时间】：2022-11-29 17:15:41
【问题描述】：

我想为我的网站制作一个实时活动提要部分。我想刷新活动数据而不重新加载整个页面。这个怎么做？

这是我的代码控制器

public function index()
{  
        $activities = collect();

        $attendance = $this->database->getReference($this->tableAttendance)->getValue();

        foreach($attendance as $key => $item){
            $activities->push(['name' => $item['name'] , 'date' => $item['date'], 'type' => $item['actionType'], 'time' => $item['time'],
            'latitude' => $item['latitude'], 'longitude' => $item['longitude']]);
        }

        $visit = $this->database->getReference($this->tableVisit)->getValue();

        foreach($visit as $key => $item){
            if(isset($item['sales'])){
                if(!$item['checkOutTime'] == ""){
                    $activities->push(['name' => $item['sales'], 'date' => $item['visitDate'], 'type' => 'Visited '.$item['customer'], 'time' => $item['checkOutTime'],
                'latitude' => $item['latitude'], 'longitude' => $item['longitude']]);
                }
            }
        }
        
        $activities = $activities->sortBy([
            ['date', 'asc'],
            ['time', 'desc'],   
        ]);
        return view('index', compact('activities'));
    
}

这是我的代码观点

<div class="card-body" style="padding: 0;">
    <div class="list-group" id="activity-feed">
        @php $i = 1; @endphp
        @foreach ($activities as $key => $item)
            <a href="javascript:triggerClick({{$i++}})" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{$item['name']}}</h5>
                    <small>{{$item['date']}}</small>
                </div>
                <div class="d-flex w-100 justify-content-between">
                    @if($item['type'] == "checkout")
                        <p class="mb-1">Check Out</p>
                    @elseif($item['type'] == "checkin")
                        <p class="mb-1">Check In</p>
                    @else
                        <p class="mb-1">{{$item['type']}}</p>
                    @endif
    
                    <small>{{$item['time']}}</small>
                </div>
            </a>
        @endforeach  
    </div>
</div>

谢谢您的帮助：）

【问题讨论】：

如果我没记错的话，那个方法叫做“套接字编程”。它是连接网络上的两个节点以相互通信的一种方式。对不起，我不能给你举个例子，但可以考虑使用Socket.io

标签： php html ajax laravel laravel-8

【解决方案1】：

您可以制作一个 javascript 函数，每隔 X 秒向您的后端/API 发出一次 AJAX 请求以获取数据，然后更新您的视图。

喜欢：

function refreshData() {
    return new Promise((resolve, reject) => {
        fetch(endpoint)
        .then(res => res.json())
        .then(data => resolve(data))
        .catch(error => reject(error));
    })
}

setInterval(() => {
    refreshData.then(data => {
        // Update you view with data
    })
}, 60 * 1000); // 60 * 1000 milsec

【讨论】：