Laravel中实现删除HTML表格行无需刷新整页的方法

1. 修正路由（遵循RESTful规范） #

原GET路由不适合执行删除操作，换成DELETE请求路由，同时正确定义参数：

// web.php
Route::delete('/delete-row/{id}', 'MyController@delete_row');

2. 修改控制器方法，返回JSON响应 #

不再返回页面跳转，而是给前端返回删除结果的JSON数据：

// MyController.php
public function delete_row($id)
{
    $deletedCount = DB::table('months')->where('id_month', $id)->delete();
    
    return response()->json([
        'success' => $deletedCount > 0,
        'message' => $deletedCount > 0 ? '删除成功' : '未找到对应记录'
    ]);
}

3. 调整视图+添加AJAX逻辑 #

• 给每个表格行添加data-id属性，方便定位要删除的行
• 表单改为POST方法，通过@method('DELETE')模拟DELETE请求（HTML表单原生不支持DELETE）
• 确保页面携带CSRF令牌，Laravel会校验非GET请求的令牌合法性
• 编写JavaScript监听按钮点击，阻止默认表单提交，发送AJAX请求完成无刷新删除

修改后的视图代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<h1>The table element</h1>

<table>
    <tr>
        <th>Month</th>
        <th>delete row</th>
    </tr>
    <tr data-id="1">
        <td>January</td>
        <td>
            <form method="POST" action="/delete-row/1">
                @method('DELETE')
                @csrf
                <button type="submit" class="delete-btn"> 删除</button>
            </form> 
        </td>
    </tr>
    <tr data-id="2">
        <td>February</td>
        <td>
            <form method="POST" action="/delete-row/2">
                @method('DELETE')
                @csrf
                <button type="submit" class="delete-btn"> 删除</button>
            </form> 
        </td>
    </tr>
</table>

<script>
// 绑定所有删除按钮的点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault();
        
        // 获取目标行和请求地址
        const targetRow = this.closest('tr');
        const requestUrl = this.form.action;
        // 获取CSRF令牌
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
        
        // 发送DELETE请求
        fetch(requestUrl, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 删除成功，直接移除对应表格行
                targetRow.remove();
                alert(data.message); // 可选：提示用户操作结果
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('删除出错:', error);
            alert('删除失败，请重试');
        });
    });
});
</script>

</body>
</html>

核心说明 #

• 使用DELETE请求：遵循HTTP规范，GET请求仅用于获取数据，删除/修改操作应使用POST/PUT/DELETE，避免误触发
• @method('DELETE')：通过隐藏输入框告诉Laravel将POST请求识别为DELETE请求，适配HTML表单的方法限制
• 操作DOM移除行：请求成功后直接从页面中删除目标行，无需刷新整个页面

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