Laravel 5.4中如何通过Ajax点击按钮更新数据并刷新表格

看起来你遇到的核心问题是Ajax请求有时生效但表格没法自动刷新，而且功能不稳定——大概率是按钮绑定、CSRF验证或者DOM更新逻辑没处理好，我给你一步步梳理解决方案：

1. 先搞定后端的路由与控制器 #

首先确保后端能正确接收签出请求并更新数据库：

路由（routes/web.php） #

添加一条POST路由来处理签出操作：

Route::post('/checkout/{id}', 'YourController@updateCheckoutTime')->name('checkout.update');

记得把YourController换成你实际的控制器名称。

控制器方法 #

在对应控制器里实现更新逻辑，用Carbon来处理时间更方便（记得先引入use Carbon\Carbon;）：

public function updateCheckoutTime(Request $request, $id)
{
    // 找到对应记录，找不到就返回404
    $visit = YourModel::findOrFail($id);
    
    // 更新签出时间为当前时间
    $visit->checkout_time = Carbon::now();
    $visit->save();

    // 返回JSON响应，带更新后的时间和状态
    return response()->json([
        'success' => true,
        'message' => 'Check out completed successfully',
        'checkout_time' => $visit->checkout_time->format('Y-m-d H:i:s')
    ]);
}

把YourModel换成你实际的模型名称，比如Visit之类的。

2. 修复前端的Ajax与按钮绑定 #

你之前的按钮用了id="checkout_btn"，如果表格有多条数据，这个id会重复，导致只有第一个按钮能触发事件——这是功能不稳定的常见原因！改成class选择器，然后完善Ajax逻辑：

按钮HTML（表格行内） #

<tr>
    <!-- 其他列 -->
    <td class="checkout-time">{{ $Data->checkout_time ?? 'Not Checked Out' }}</td>
    <td>
        <button type="button" class="btn btn-primary checkout-btn" data-id="{{ $Data->VST_ID }}">Check Out</button>
    </td>
</tr>

这里把<a>改成<button>更合适（毕竟是触发操作，不是跳转），同时给签出时间列加了checkout-time类，方便后续更新DOM。

Ajax代码 #

// 用事件委托绑定，确保动态生成的按钮也能触发
$(document).on('click', '.checkout-btn', function(e) {
    e.preventDefault();
    const btn = $(this);
    const vstId = btn.data('id');

    // 禁用按钮防止重复提交
    btn.prop('disabled', true).text('Processing...');

    $.ajax({
        url: `/checkout/${vstId}`, // 或者用Laravel的路由助手：{{ route('checkout.update', $Data->VST_ID) }}（如果是在blade模板里写）
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}' // 必须带CSRF令牌，否则Laravel会拒绝请求
        },
        success: function(response) {
            if (response.success) {
                // 更新当前行的签出时间
                btn.closest('tr').find('.checkout-time').text(response.checkout_time);
                // 把按钮改成已签出状态
                btn.removeClass('btn-primary').addClass('btn-secondary').text('Checked Out');
                // 可以用更友好的提示，比如toast，这里用alert示例
                alert(response.message);
            }
        },
        error: function(xhr) {
            alert('Oops, something went wrong. Please try again.');
            // 控制台打印错误信息，方便调试
            console.error(xhr.responseText);
        },
        complete: function() {
            // 如果请求失败，恢复按钮状态
            if (!btn.hasClass('btn-secondary')) {
                btn.prop('disabled', false).text('Check Out');
            }
        }
    });
});

3. 关键问题排查 #

• 重复ID问题：之前用id="checkout_btn"，多按钮场景下只有第一个生效，换成classcheckout-btn+事件委托就能解决。
• CSRF令牌缺失：Laravel的POST请求必须带CSRF令牌，否则会返回419错误，导致请求失败——一定要在Ajax数据里加上_token。
• DOM更新逻辑：Ajax成功后必须主动找到对应行的时间元素并更新，而不是等着页面刷新，用closest('tr')定位当前行，再找.checkout-time元素就能精准更新。

按照上面的步骤修改后，你的Check Out按钮应该能稳定工作，点击后自动更新数据库并刷新表格对应行的内容，不用手动刷新页面啦！

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