Laravel+Ajax实现Blade视图数据定时刷新的问题求助

需求说明 #

通过setInterval定时更新Blade视图中的数据，数据会通过其他渠道存入数据库，需从Controller获取Model数据，利用Ajax更新视图中的Eloquent数据。

问题1说明 #

Ajax的success:function失效问题已由Angel Miladinov修复，属于语句错误导致，此处不再赘述。

问题2：修正清空后重新加载数据集的代码 #

原代码存在三个核心问题：

1. 拼接好的HTML未插入到页面DOM中；
2. 错误地从response.todotableDataSet取数据（Controller返回的直接是Todo集合的JSON数组）；
3. 字段名错误（使用了不存在的body字段，实际应为id/title/description），且未用<tr>包裹表格行。

修正后的success回调代码：

success:function(response){
    // 清空表格内容
    $('#todos-list').empty();
    
    // 检查是否有数据
    if(response.length > 0){
        let htmlContent = '';
        // 遍历数据拼接表格行
        $.each(response, function(index, todo){
            htmlContent += `<tr id="todo${todo.id}">
                                <td>${todo.id}</td>
                                <td>${todo.title}</td>
                                <td>${todo.description}</td>
                            </tr>`;
        });
        // 将拼接好的HTML插入到tbody
        $('#todos-list').append(htmlContent);
    }
}

问题3：Todo::with('index')->get();是否必要？ #

完全没有必要，原因如下：

1. 你的Todo模型中未定义名为index的关联关系（提供的Model代码仅包含$fillable属性）；
2. 当前需求仅需获取Todo自身的id/title/description字段，不需要关联其他模型数据；
3. 原Controller中该行代码位于return view()之后，代码执行到return就会终止，这行代码永远不会被执行。

修正后的完整代码 #

CrudController.php #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Todo;

class CrudController extends Controller 
{
    public function index(Request $request)
    {
        // 获取所有Todo数据
        $todotableDataSet = Todo::all();

        // Ajax请求返回JSON数据
        if($request->ajax()){
            return response()->json($todotableDataSet);
        }

        // 普通请求返回视图
        return view('home')->with('tableDataSetURL', $todotableDataSet);
    }
}

web.php #

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CrudController;

// 首页路由
Route::get('/', [CrudController::class, 'index']);

// Ajax获取数据的路由
Route::get('/table-data', [CrudController::class, 'index'])->name('table.data');

todo.js #

jQuery(document).ready(function($){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
    });

    // 每10秒更新一次数据
    setInterval(function(){
        $.ajax({
            url: '/table-data',
            type: 'GET',
            dataType: 'json',
            success:function(response){
                $('#todos-list').empty();
                
                if(response.length > 0){
                    let htmlContent = '';
                    $.each(response, function(index, todo){
                        htmlContent += `<tr id="todo${todo.id}">
                                            <td>${todo.id}</td>
                                            <td>${todo.title}</td>
                                            <td>${todo.description}</td>
                                        </tr>`;
                    });
                    $('#todos-list').append(htmlContent);
                }
            },
            error: function (xhr, status, error) {
                console.error('Ajax请求失败:', error);
            }
        })
    }, 10000);
});

Todo.php #

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    protected $fillable = ['title', 'description'];
}

home.blade.php（需补充CSRF meta标签） #

在页面<head>中添加CSRF令牌标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

原表格部分保留：

<div>
    <table class="table table-inverse">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody id="todos-list" name="todos-list">
            @foreach ($tableDataSetURL as $dataSetinBlade)
            <tr id="todo{{$dataSetinBlade->id}}">
                <td>{{$dataSetinBlade->id}}</td>
                <td>{{$dataSetinBlade->title}}</td>
                <td>{{$dataSetinBlade->description}}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

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