Laravel中如何用JQuery实现数据库新增数据的无刷新动态展示

Hey there! 你已经用jQuery AJAX搞定了基础的数据加载，现在想实现数据库新增数据时自动展示、不用手动刷新页面对吧？我给你两个实用方案，从易到难，按需选择：

方案一：定时轮询（快速上手，无需额外依赖） #

这个方案是在你现有代码基础上做扩展，核心思路就是定期调用你的loadData函数，但为了避免重复加载旧数据，我们可以加个「最后数据ID」的判断，只拉取新增的内容。

1. 后端修改（路由+控制器） #

首先修改你的路由和控制器方法，让它可以接收一个last_id参数，返回比这个ID大的最新数据：

// routes/web.php
use Illuminate\Http\Request;
use App\Models\TeamMessage;

Route::get('/teammessage/{id}', function ($id, Request $request) {
    $lastId = $request->query('last_id', 0);
    // 按project_id筛选，只返回ID大于lastId的新消息
    $messages = TeamMessage::where('project_id', $id)
                          ->where('id', '>', $lastId)
                          ->orderBy('id', 'asc')
                          ->get();
    return response()->json(['success' => $messages]);
});

2. 前端优化 #

修改你的loadData函数，记录当前最后一条数据的ID，每次请求时带上这个参数，并且只追加新增的数据：

// 全局变量存储最后一条消息的ID，初始为0
let lastMessageId = 0;

function loadData() {
    var id = $('#projectId').val();
    $.ajax({
        type: 'GET',
        url: '/teammessage/' + id,
        data: { last_id: lastMessageId }, // 带上最后ID，过滤旧数据
        success: function(response){
            // 遍历新增的消息（这里修正了你原来each循环的写法）
            $.each(response.success, function(index, item){
                $('#test').append(item.team_message);
                // 更新最后消息ID
                if(item.id > lastMessageId) {
                    lastMessageId = item.id;
                }
            });
        }
    });
}

// 每隔3秒调用一次loadData，可根据需求调整间隔时间
setInterval(loadData, 3000);

小贴士：如果担心频繁请求影响性能，可以把间隔时间调长，或者改成「长轮询」（后端有新数据才返回，否则挂起请求），不过普通轮询已经够大部分场景使用了。

方案二：Laravel Echo + 广播驱动（真正的实时推送） #

如果想要更高效的实时体验（数据一插入就立刻展示），那得用Laravel的广播功能，配合Pusher或者Redis这类驱动。这里以Pusher为例：

1. 安装依赖&配置 #

首先安装Laravel Echo和Pusher：

composer require pusher/pusher-php-server
npm install laravel-echo pusher-js

然后修改.env文件的广播相关配置：

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=你的Pusher应用ID
PUSHER_APP_KEY=你的Pusher应用密钥
PUSHER_APP_SECRET=你的Pusher应用秘钥
PUSHER_APP_CLUSTER=你的集群（比如ap1）

2. 创建广播事件 #

生成一个当新消息插入时触发的事件：

php artisan make:event NewTeamMessage

修改app/Events/NewTeamMessage.php内容：

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Models\TeamMessage;

class NewTeamMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    // 注入新增的消息模型
    public function __construct(TeamMessage $message)
    {
        $this->message = $message;
    }

    // 按项目ID划分广播频道，确保只有对应项目的用户能收到消息
    public function broadcastOn()
    {
        return new Channel('team-messages.' . $this->message->project_id);
    }
}

3. 在控制器中触发事件 #

当你插入新的TeamMessage时，触发这个广播事件：

// 假设你在存储消息的控制器方法里
use App\Events\NewTeamMessage;

public function store(Request $request)
{
    $message = TeamMessage::create([
        'project_id' => $request->project_id,
        'team_message' => $request->message,
        // 其他字段...
    ]);

    // 触发广播，toOthers()可以避免触发当前用户的监听
    broadcast(new NewTeamMessage($message))->toOthers();
    
    return response()->json(['status' => 'success']);
}

4. 前端监听广播 #

修改前端代码，初始化Laravel Echo并监听对应频道：

// 先在bootstrap.js里初始化Echo（如果还没配置的话）
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

// 在页面脚本里监听对应项目的频道
let projectId = $('#projectId').val();

window.Echo.channel('team-messages.' + projectId)
    .listen('NewTeamMessage', (event) => {
        // 收到新消息后直接追加到页面
        $('#test').append(event.message.team_message);
    });

这样一来，当数据库插入新消息时，前端会立刻收到广播推送，无需等待轮询，体验更流畅。

小提示：优化现有代码 #

你原来的each循环写法有点小问题——$(value.success).each是把数组当成DOM元素处理，容易出问题，改成$.each(response.success, function(index, item)才是正确遍历数组的方式，我已经在方案一的代码里帮你修正啦～

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