如何实现定时自动无刷新提交表单并保留页面数据？

我目前用以下AJAX脚本实现了点击提交按钮后不刷新页面、保留所有数据的功能：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX POST Submit</title>

  <script>
  function ajaxpost () {
    // (A) 获取表单数据
    var form = document.getElementById("myForm");
    var data = new FormData(form);
  
    // (B) 发起AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "0-dummy.php");
    // 服务器响应处理
    xhr.onload = function () { console.log(this.response); };
    xhr.send(data);
  
    // (C) 阻止原生表单提交
    return false;
  }
  </script>
</head>
<body>
  <form id="myForm" onsubmit="return ajaxpost()">
    Name: <input type="text" name="name" required/>
    Email: <input type="text" name="email" required/>
    <input type="submit" id="hello" value="Go!"/>
  </form>
</body>
</html>

但我实际需要的是不用点击提交按钮，每隔数分钟自动提交表单到dummy.php，同时不清除页面数据。背景是我在做一个HTML页面，需要通过PHP每隔几分钟把复选框的值保存到文本文件，设备会读取这个文本文件的数据来控制电路连接。

我之前写了倒计时脚本，但用form.submit()会导致页面刷新、数据丢失，现在整合AJAX和倒计时功能，实现循环自动提交的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>自动AJAX提交表单</title>
  <script>
    // AJAX提交函数：无刷新提交表单数据
    function ajaxSubmit() {
      const form = document.getElementById("myForm");
      const data = new FormData(form);
      
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "0-dummy.php");
      xhr.onload = function() {
        console.log("提交响应：", this.response);
        // 可在这里添加提交成功的提示，比如更新页面状态
      };
      xhr.onerror = function() {
        console.error("提交失败，请检查网络或后端服务");
      };
      xhr.send(data);
    }

    // 启动倒计时与循环自动提交
    function startAutoSubmit(intervalMinutes) {
      const display = document.getElementById("countdown");
      let totalSeconds = intervalMinutes * 60;
      
      setInterval(() => {
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        
        // 格式化倒计时显示
        display.innerHTML = `<b>${minutes.toString().padStart(2, "0")}m : ${seconds.toString().padStart(2, "0")}s</b>`;
        
        if (totalSeconds > 0) {
          totalSeconds--;
        } else {
          // 时间到，执行AJAX提交
          ajaxSubmit();
          // 重置倒计时，继续循环
          totalSeconds = intervalMinutes * 60;
        }
      }, 1000);
    }

    // 页面加载完成后自动启动，这里设置为每隔5分钟提交一次
    window.onload = () => startAutoSubmit(5);
  </script>
</head>
<body>
  <!-- 显示倒计时的区域 -->
  <div id="countdown"></div>
  
  <form id="myForm">
    <!-- 替换为你的实际复选框等表单元素 -->
    设备1电路：<input type="checkbox" name="device1" value="on">开启<br>
    设备2电路：<input type="checkbox" name="device2" value="on">开启<br>
    <!-- 可选：保留手动提交按钮方便测试 -->
    <button type="button" onclick="ajaxSubmit()">手动提交</button>
  </form>
</body>
</html>

对应的PHP后端示例（0-dummy.php），负责接收数据并写入文本文件：

<?php
// 获取POST表单数据
$formData = $_POST;
// 转为JSON格式写入文件，方便设备读取
$dataContent = json_encode($formData) . PHP_EOL;
// 写入文件，确保文件有可写权限
file_put_contents("device_settings.txt", $dataContent, FILE_APPEND);
// 返回成功响应
echo "提交成功";
?>

关键说明 #

• 用AJAX提交替代原生表单提交，彻底避免页面刷新，确保表单数据不会丢失
• 倒计时结束后自动触发AJAX提交，提交完成后重置倒计时，实现循环自动提交
• 加入了错误处理，方便调试提交失败的情况
• 页面加载后自动启动倒计时，无需用户操作

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