如何防止表单重复提交修改LED状态 改用按钮向PHP提交请求

不需要修改你现有PHP后端的核心判断逻辑，用原生JavaScript的Fetch API发送异步POST请求即可，全程页面无刷新，从根源上避免表单重复提交导致的LED状态误改问题。

步骤1：替换原有表单为普通按钮 #

删掉原来的form表单代码，换成普通按钮元素：

<button id="toggleLedBtn" class="button">Toggle LED</button>

步骤2：绑定点击事件发送异步请求 #

把下面的脚本放在页面底部即可；如果要放在页面head区域，保留代码里的DOMContentLoaded监听，确保页面元素加载完成后再绑定事件：

document.addEventListener('DOMContentLoaded', function () {
  const toggleBtn = document.getElementById('toggleLedBtn');
  toggleBtn.addEventListener('click', async function () {
    // 临时禁用按钮，防止连续点击触发多次请求
    toggleBtn.disabled = true;
    try {
      // 构造POST参数，和原表单提交的参数格式完全一致，后端无需修改
      const postData = new FormData();
      postData.append('toggle_LED', '1');
      // 向当前页面地址发送POST请求
      await fetch(window.location.href, {
        method: 'POST',
        body: postData
      });
      // 此处可自定义请求成功后的反馈，比如修改按钮文字、更新页面上的LED状态显示
    } catch (e) {
      console.error('LED切换请求发送失败', e);
    } finally {
      // 恢复按钮可点击状态
      toggleBtn.disabled = false;
    }
  })
})

常见失败原因说明 #

• 之前用button onclick绑定自定义函数失败，基本是两个原因：
  • 绑定事件时按钮元素还没加载完成，JS获取不到对应元素
  • 发送的POST参数格式不对，PHP端无法识别到toggle_LED字段，没有执行切换逻辑
• 上述方案和你原有的PHP逻辑完全兼容，不需要调整后端判断规则。

可选后端优化 #

你目前的PHP逻辑需要先查一次库再执行更新，可以简化成单条SQL完成状态翻转，减少一次数据库查询开销，更适合ESP8266这类轻量项目场景：

if (isset($_POST['toggle_LED'])) {
    // 直接用计算逻辑翻转0/1状态，无需提前查询
    mysqli_query($conn, "UPDATE LED_status SET status = 1 - status WHERE id = 1;");
    
    // 如果需要前端同步拿到最新状态，可以查询后返回JSON格式结果
    // $res = mysqli_query($conn, "SELECT status FROM LED_status WHERE id = 1;");
    // $row = mysqli_fetch_assoc($res);
    // exit(json_encode(['led_status' => $row['status']]));
}

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