HTML页面在Live Server中无限刷新问题求助

核心问题分析 #

页面无限刷新的触发逻辑大概率是：页面加载→getList()拉取数据→insertList()插入DOM→调用removeElement()触发刷新→页面重新加载，循环往复。结合你的代码细节，以下是具体修复步骤：

1. 排查removeElement()函数的实现 #

你的insertList函数末尾调用了removeElement()，如果这个函数包含location.reload()这类刷新语句，或者执行时抛出错误导致页面强制刷新，就会直接触发循环。

修复方案：

• 打开removeElement()代码，移除任何页面刷新相关语句。
• 如果该函数是用来清除旧表格数据，改为在getList()开头统一清空表格，避免每次插入行都重复执行清除：

const getList = async () => {
  let url = 'http://127.0.0.1:5000/pacientes';
  fetch(url, {
    method: 'get',
  })
    .then((response) => response.json())
    .then((data) => {
      // 清空表格（保留表头行）
      const table = document.getElementById('myTable');
      while (table.rows.length > 1) {
        table.deleteRow(1);
      }
      // 插入新数据
      data.pacientes.forEach(item => insertList(item.name, 
                                                item.preg, 
                                                item.plas,
                                                item.pres,
                                                item.skin,
                                                item.test,
                                                item.mass,
                                                item.pedi,
                                                item.age,
                                                item.outcome
                                              ))
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}

然后删除insertList函数末尾的removeElement();调用。

2. 确保getList()仅执行一次 #

当前代码中getList()直接在全局作用域执行，可能因DOM操作或Live Server特性导致重复触发。将其包裹在页面加载事件中，确保只执行一次：

document.addEventListener('DOMContentLoaded', () => {
  getList();
});

3. 修正表单提交后的逻辑 #

你在newItem中调用insertList时未传递outcome参数（API返回的诊断结果），手动插入不完整数据可能触发后续异常。改为等待postItem完成后，重新拉取完整列表：

const newItem = async (event) => {
  event.preventDefault();

  let inputPatient = document.getElementById("newInput").value;
  let inputPreg = document.getElementById("newPreg").value;
  let inputPlas = document.getElementById("newPlas").value;
  let inputPres = document.getElementById("newPres").value;
  let inputSkin = document.getElementById("newSkin").value;
  let inputTest = document.getElementById("newTest").value;
  let inputMass = document.getElementById("newMass").value;
  let inputPedi = document.getElementById("newPedi").value;
  let inputAge = document.getElementById("newAge").value;

  const checkUrl = `http://127.0.0.1:5000/pacientes?nome=${inputPatient}`;
  fetch(checkUrl, {
    method: 'get'
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.pacientes && data.pacientes.some(item => item.name === inputPatient)) {
        alert("O paciente já está cadastrado.\nCadastre o paciente com um nome diferente ou atualize o existente.");
      } else if (inputPatient === '') {
        alert("O nome do paciente não pode ser vazio!");
      } else if (isNaN(inputPreg) || isNaN(inputPlas) || isNaN(inputPres) || isNaN(inputSkin) || isNaN(inputTest) || isNaN(inputMass) || isNaN(inputPedi) || isNaN(inputAge)) {
        alert("Esse(s) campo(s) precisam ser números!");
      } else {
        // 等待POST请求完成后刷新列表
        postItem(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge)
          .then(() => {
            alert("Item adicionado!");
            getList();
            // 清空输入框
            document.getElementById("newInput").value = "";
            document.getElementById("newPreg").value = "";
            document.getElementById("newPlas").value = "";
            document.getElementById("newPres").value = "";
            document.getElementById("newSkin").value = "";
            document.getElementById("newTest").value = "";
            document.getElementById("newMass").value = "";
            document.getElementById("newPedi").value = "";
            document.getElementById("newAge").value = "";
          });
      }
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}

同时修改postItem让它返回Promise：

const postItem = async (inputPatient, inputPreg, inputPlas,
                        inputPres, inputSkin, inputTest, 
                        inputMass, inputPedi, inputAge) => {
  const formData = new FormData();
  formData.append('name', inputPatient);
  formData.append('preg', inputPreg);
  formData.append('plas', inputPlas);
  formData.append('pres', inputPres);
  formData.append('skin', inputSkin);
  formData.append('test', inputTest);
  formData.append('mass', inputMass);
  formData.append('pedi', inputPedi);
  formData.append('age', inputAge);

  let url = 'http://127.0.0.1:5000/paciente';
  // 返回fetch的Promise以便后续链式调用
  return fetch(url, {
    method: 'post',
    body: formData
  })
    .then((response) => response.json())
    .catch((error) => {
      console.error('Error:', error);
    });
}

4. 优化Live Server配置（可选） #

如果问题仍存在，可能是Live Server监听了不必要的文件变化。在项目根目录创建.live-server.json文件，排除无关目录：

{
  "ignore": [
    "node_modules/",
    "*.log"
  ]
}

内容的提问来源于stack exchange，提问作者Lucas Cordeiro Romão