Laravel中Ajax请求完成后如何刷新数据表格？

没问题，我给你一套完整的实现方案，既能保持你现有代码的逻辑，又能优雅地刷新表格：

第一步：拆分表格视图，创建单独的tbody片段 #

首先把你原来的tbody代码抽成一个独立的blade视图文件，这样后端可以单独返回这个片段，不用渲染整个页面。

创建resources/views/transaction/table-body.blade.php，内容就是你原来的tbody代码：

<tbody class="fixed-header">
    @foreach($transactionsCustomer as $transaction)
    <tr>
        <td>{{ $transaction->description }}</td>
        @foreach($accounts as $account)
            @if($transaction->code == 0)
                @if($account->currency->id==$transaction->currency_id)
                    <td>{{ $transaction->amount }}</td>
                    <td></td>
                @else
                    <td></td>
                    <td></td>
                @endif
            @else
                @if($account->currency->id==$transaction->currency_id)
                    <td></td>
                    <td>{{ $transaction->amount }}</td>
                @else
                    <td></td>
                    <td></td>
                @endif
            @endif
        @endforeach
        <td><a href="{{ route('transaction.edit',$transaction->id)}}" class="btn btn-primary" >سمون</a></td>
    </tr>
    @endforeach
</tbody>

然后在原来的transaction.index视图里，把原来的tbody替换成这个片段的引入：

@include('transaction.table-body')

第二步：添加后端接口返回表格片段 #

在你的TransactionController里新增一个方法，专门返回这个表格tbody的内容：

public function customerTransactionsTable(Request $request)
{
    $customerId = $request->id;
    // 复用你原来的查询逻辑，获取需要的账户和交易数据
    $accounts = Account::where('customer_id', $customerId)->get();
    $transactionsCustomer = DB::table('transactions')
        ->join('accounts','transactions.account_id' ,'=','accounts.id')
        ->join('customers','accounts.customer_id','=','customers.id')
        ->join('currencies','accounts.currency_id','=','currencies.id')
        ->select('transactions.*','currencies.id as currency_id')
        ->where('customers.id',$customerId)
        ->get();

    // 只返回表格tbody的视图
    return view('transaction.table-body', compact('accounts', 'transactionsCustomer'));
}

然后在routes/web.php里添加对应的路由：

Route::get('/transaction/customer/{id}/table', [TransactionController::class, 'customerTransactionsTable'])->name('transaction.customer.table');

第三步：实现前端的表格刷新函数 #

首先，在页面上存一下当前客户的ID，比如在表单里加个隐藏输入（或者存在元素的data属性里）：

<input type="hidden" id="customer-id" value="{{ $customer->id }}">

然后实现你之前提到的updateTable函数，用Ajax请求后端的新接口，替换现有tbody：

function updateTable() {
    const customerId = $('#customer-id').val();
    // 替换路由里的占位符为实际客户ID
    const url = "{{ route('transaction.customer.table', ':id') }}".replace(':id', customerId);
    
    $.ajax({
        type: 'GET',
        url: url,
        success: function (html) {
            // 用新的tbody替换旧的
            $('.fixed-header').replaceWith(html);
        },
        error: function() {
            // 可选：处理请求失败的情况
            alert('表格刷新失败，请重试');
        }
    });
}

最后：确保Ajax提交成功后调用刷新 #

你原来的表单提交Ajax已经在success里调用了updateTable()，现在这个函数就能正常工作了。

这种方式的好处是完全复用了你原来的Blade模板逻辑，不用在前端手动拼接HTML，避免出错，而且代码结构更清晰。

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