Laravel中如何通过Jquery将开关状态1/0写入MySQL数据库？

现有代码核心问题汇总 #

• HTML 存在冗余代码，@if 两个分支内容完全一致，可直接删除重复判断
• jQuery 错误通过修改 input 的 value 属性判断开关状态，应该读取 checked 属性获取实时开关值
• AJAX 请求参数名与控制器验证要求不匹配，且未适配 Laravel 的 PUT 方法请求要求
• 控制器针对 AJAX 请求返回了重定向响应，无法被前端 JS 正确识别
• 开关状态提交时使用了修改前的旧值，导致数据库更新内容与实际开关状态不符

修正后代码 #

HTML 部分 #

<form action="{{ route('dashboard.update', $value->id) }}" method="post">
    @csrf
    @method('PUT')
    {{ $value->port_1 }}
    <div>
        <label class="switch">
            <input id="port_{{$value->id}}" 
                   data-id="{{$value->id}}" 
                   onchange="myFunction({{$value->id}})" 
                   class="toggle-class" 
                   type="checkbox" 
                   data-onstyle="success" 
                   data-offstyle="danger" 
                   data-toggle="toggle" 
                   data-on="Active" 
                   data-off="InActive" 
                   {{ $value->port_1 ? 'checked' : '' }}>
            <span class="slider round"></span>
        </label>
    </div>
</form>

jQuery 部分 #

function myFunction(id) {
    // 直接通过checked属性获取当前开关状态，选中为1，未选中为0
    const currentStatus = document.getElementById("port_" + id).checked ? 1 : 0;
    $.ajax({
        method: 'POST',
        url: '/dashboard/update/' + id,
        data: {
            'port_1': currentStatus,
            '_token': '{{csrf_token()}}',
            '_method': 'PUT' // 适配Laravel的PUT方法要求
        },
        success: function(response) {
            console.log(response);
            alert("状态更新成功");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            alert("状态更新失败");
        }
    });
}

控制器 update 方法 #

public function update(Request $request, Dashboard $dashboard)
{
    $request->validate([
        'port_1'  => 'required|boolean',
    ]);
    
    $dashboard->update([
        'port_1' => $request->input('port_1')
    ]);
    
    // AJAX请求返回JSON响应
    return response()->json([
        'success' => true,
        'message' => '状态更新成功'
    ]);
}

额外配置检查 #

• 确认 Dashboard 模型的 $fillable 属性中已添加 port_1 字段，允许批量赋值
• 确认路由文件中存在对应的PUT路由：Route::put('/dashboard/update/{dashboard}', [DashboardController::class, 'update'])->name('dashboard.update');

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