JS fetch发送POST请求触发PHP更新开关状态功能异常如何解决

存在的问题 #

• HTML语法错误：input标签的onclick属性未闭合，缺少结尾的双引号，属性结构错误导致点击事件无法正常触发
• JS语法错误：fetch的then回调括号书写错误，多了多余的右括号，且整个toggleStatus函数缺少结尾的闭合花括号，代码无法执行
• 请求格式不匹配：JS发送的是JSON格式的请求体，PHP默认的$_POST全局变量仅能解析application/x-www-form-urlencoded格式的表单数据，无法直接获取JSON内容
• PHP参数名不匹配：JS发送的请求体中参数键为status，但PHP代码尝试读取不存在的Kim1043参数，无法拿到正确的状态值
• PHP逻辑不完整：仅返回参数值没有编写更新数据库的逻辑，且用return不会输出响应内容，前端无法收到返回结果
• 初始状态不匹配：原代码没有给input加checked属性，页面加载时开关状态和数据库存储的status值不一致

修复后的代码 #

HTML部分 #

<!-- 补全onclick属性闭合，新增checked属性匹配初始状态 -->
<input id="Kim1043" class="form-check-input" onclick="toggleStatus(this)" type="checkbox" name="Kim1043" <?php echo $value['status'] == 'Active' ? 'checked' : '' ?>>
<label id="user-status-toggle" for="Kim1043"> <?php echo $value['status']; ?> </label>

JS部分 #

function toggleStatus(radio) {
    // 点击后临时禁用开关防止重复提交
    radio.disabled = true;
    var toggle = document.getElementById('user-status-toggle');
    const status = radio.checked ? 'Active' : 'Inactive';

    fetch("/dashboard?php=salespeople-tb", { 
        method: "POST", 
        // 声明请求格式为JSON
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ status: status }) 
    })
    // 修正括号语法错误
    .then((resp) => { 
        if (resp.ok) {
            toggle.textContent = status;
        } else {
            // 请求失败回滚开关状态
            radio.checked = !radio.checked;
            toggle.textContent = "Error";
        }
    })
    .catch((resp) => { 
        // 异常回滚开关状态
        radio.checked = !radio.checked;
        toggle.textContent = "Error";
    })
    .finally(() => {
        // 恢复开关可点击状态
        radio.disabled = false;
    });
}

PHP部分 #

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 读取JSON格式的请求体
    $input = file_get_contents('php://input');
    $data = json_decode($input, true);
    
    // 参数合法性校验
    if (!isset($data['status']) || !in_array($data['status'], ['Active', 'Inactive'])) {
        http_response_code(400);
        echo json_encode(['code' => 400, 'msg' => '参数错误']);
        exit;
    }

    $status = $data['status'];
    // 此处替换为你自己的数据库更新逻辑，示例：
    // $update = $pdo->prepare("UPDATE 你的表名 SET status = ? WHERE 条件字段 = ?");
    // $update->execute([$status, 对应用户/记录ID]);

    // 输出响应给前端
    http_response_code(200);
    echo json_encode(['code' => 200, 'msg' => '更新成功', 'status' => $status]);
    exit;
}

内容的提问来源于stack exchange，提问作者Klein -_0