Node.js(Express)中如何处理Bootstrap Switch开关输入？求助

一、修正HTML代码的核心问题 #

你的HTML存在两个关键错误，导致开关无法正常触发表单提交和数据传递：

• 复选框缺少name属性：表单提交时，只有带name的元素才会被传递到服务器
• 标签的for属性与输入框id不匹配：点击标签无法触发开关切换

修正后的HTML代码：

<form action="/apps" method="post">    
    <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="Switch" name="toggleSwitch">
        <label class="form-check-label" for="Switch">Default switch checkbox input</label>
    </div>
</form>

二、添加开关切换时自动提交表单的逻辑 #

默认情况下，切换复选框不会自动提交表单，需要通过JavaScript监听change事件触发提交：

document.getElementById('Switch').addEventListener('change', function() {
    // 获取当前开关所在的表单并提交
    this.closest('form').submit();
});

三、在Express路由中获取开关状态 #

现在可以通过req.body获取开关的选中状态：复选框选中时，值为on；未选中时，该字段不会出现在req.body中。路由代码修改如下：

app.post('/apps', bodyParser.urlencoded({ extended: true }), (req, res, next) => {
    // 判断开关是否被选中
    const isSwitchOn = req.body.toggleSwitch === 'on';
    console.log('开关状态:', isSwitchOn);
    
    // 在这里执行你需要的服务器操作，比如修改配置、调用接口等
    
    // 返回响应给前端，示例为页面重定向
    res.redirect('/');
});

可选：用AJAX实现无刷新实时交互 #

如果不想页面刷新，可以用Fetch API发送异步请求，提升用户体验：

前端JavaScript代码： #

document.getElementById('Switch').addEventListener('change', function() {
    const formData = new FormData(this.closest('form'));
    fetch('/apps', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('服务器返回状态:', data.status);
        // 可在此处添加页面状态更新逻辑，比如显示提示文字
    })
    .catch(error => console.error('请求失败:', error));
});

对应Express路由修改： #

app.post('/apps', bodyParser.urlencoded({ extended: true }), (req, res, next) => {
    const isSwitchOn = req.body.toggleSwitch === 'on';
    console.log('开关状态:', isSwitchOn);
    
    // 执行服务器操作
    
    // 返回JSON格式响应
    res.json({ success: true, status: isSwitchOn });
});

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