Laravel 8 实现页面无刷新刷新活动数据的方法

一、后端新增API接口 #

原index方法负责返回页面视图，我们需要新增一个接口专门返回活动数据的JSON格式，供前端异步调用：

public function getActivities()
{  
    $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']) && $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'],   
    ]);
    
    // 返回JSON格式数据
    return response()->json($activities);
}

同时在路由文件中添加该接口的路由：

Route::get('/activities', [YourController::class, 'getActivities']);

二、前端修改实现异步更新 #

修改视图页面，将活动列表的渲染逻辑封装为JavaScript函数，通过定时请求API获取最新数据并更新DOM：

<div class="card-body" style="padding: 0;">
    <div class="list-group" id="activity-feed">
        <!-- 内容将由JS动态生成 -->
    </div>
</div>

<script>
// 渲染活动列表的复用函数
function renderActivities(activities) {
    const feedContainer = document.getElementById('activity-feed');
    feedContainer.innerHTML = '';
    let i = 1;
    
    activities.forEach(item => {
        let actionText = item.type;
        if (item.type === "checkout") {
            actionText = "Check Out";
        } else if (item.type === "checkin") {
            actionText = "Check In";
        }
        
        const link = document.createElement('a');
        link.href = `javascript:triggerClick(${i++})`;
        link.className = 'list-group-item list-group-item-action flex-column align-items-start';
        
        link.innerHTML = `
            <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">
                <p class="mb-1">${actionText}</p>
                <small>${item.time}</small>
            </div>
        `;
        
        feedContainer.appendChild(link);
    });
}

// 页面加载时初始化数据
fetch('/activities')
    .then(response => response.json())
    .then(data => renderActivities(data));

// 定时刷新数据，每5秒请求一次（可按需调整间隔）
setInterval(() => {
    fetch('/activities')
        .then(response => response.json())
        .then(data => renderActivities(data));
}, 5000);
</script>

三、可选优化方向 #

• 增量更新：记录最后一次获取数据的时间戳或最新条目ID，请求API时携带该参数，仅返回新增活动，减少数据传输和DOM操作开销。
• WebSocket推送：若需要秒级实时更新，可替换轮询为WebSocket，后端在活动数据变更时主动推送给前端，避免无效请求。
• 加载状态提示：在请求数据过程中添加加载动画，提升用户体验。

内容的提问来源于stack exchange，提问作者Anthony Rafael