Laravel：无需JS仅用控制器实现模态框无刷新添加表格行可行吗？

很遗憾，不使用JavaScript的话，完全没办法实现不刷新页面就往表格里添加行的需求——这是由HTTP协议的核心逻辑决定的：浏览器只会在收到新的请求响应时才会更新页面内容，要么刷新整个页面，要么通过异步请求（AJAX）获取新内容再由前端代码修改页面DOM。

仅靠Laravel控制器是做不到的，因为控制器只负责后端的数据处理和响应返回，它没办法直接修改前端页面的元素（比如往表格里插新行）。不过结合一点点简洁的JavaScript，你就能完美解决模态框保存后不关闭、表格实时更新的需求，而且实现起来并不复杂。

具体实现步骤 #

1. 编写Laravel控制器方法处理保存请求 #

首先在你的控制器（比如TaskController）里添加一个处理任务保存的方法，它会接收表单数据、保存到数据库，然后返回新任务对应的表格行HTML片段：

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

public function store(Request $request)
{
    // 验证输入数据
    $validated = $request->validate([
        'task_name' => 'required|string|max:255',
    ]);

    // 保存新任务到数据库
    $task = Task::create($validated);

    // 返回预渲染好的表格行HTML（用Blade片段实现）
    return response()->view('partials.task_row', compact('task'));
}

2. 创建Blade片段用于渲染单个表格行 #

新建一个resources/views/partials/task_row.blade.php文件，用来生成单个任务的表格行：

<tr>
    <td class="table-text">
        <div style="float: left">{{ $task->task_name }}</div>
    </td>
    <td style="width: 10%">
        <div style="float: end">DELETE</div>
    </td>
</tr>

3. 添加前端JavaScript处理异步请求 #

在你的页面里（或者单独的JS文件中）添加一段简单的代码，监听模态框里的保存按钮点击事件，用AJAX提交数据并更新表格：

// 假设你的保存按钮ID是save-task-btn，输入框ID是task-name-input
document.getElementById('save-task-btn').addEventListener('click', async function(e) {
    e.preventDefault(); // 阻止默认的表单提交（避免刷新页面）

    const taskName = document.getElementById('task-name-input').value;
    const tableBody = document.querySelector('.table tbody');

    try {
        // 发送POST请求到控制器的store方法
        const response = await fetch('/tasks', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: `task_name=${encodeURIComponent(taskName)}`
        });

        if (response.ok) {
            // 获取控制器返回的新行HTML，插入到表格末尾
            const newRowHtml = await response.text();
            tableBody.insertAdjacentHTML('beforeend', newRowHtml);
            
            // 清空输入框，保持模态框打开
            document.getElementById('task-name-input').value = '';
        } else {
            alert('保存失败，请重试');
        }
    } catch (error) {
        console.error('请求出错:', error);
        alert('请求出错，请检查网络或重试');
    }
});

4. 确保页面包含CSRF令牌 #

Laravel需要CSRF令牌来验证POST请求，确保你的页面头部有这个meta标签（默认Laravel项目已经包含）：

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

为什么必须用JavaScript？ #

简单来说：Laravel控制器负责处理数据，而JavaScript负责更新前端页面。没有JS的话，你只能通过刷新页面来获取新的响应，这必然会导致模态框关闭——这是浏览器的默认行为，后端控制器无法干预。

不过上面的JS代码非常简洁，只做了必要的事情，完全不会增加太多复杂度，却能完美解决你的场景需求。

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