JavaScript Fetch POST请求后防止页面跳转并刷新当前页面

<form id="myForm">
  <input type="text" name="name" />
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  // 在这里执行你的 async fetch 函数
  // 例如：updateGuestName(paxid, name);
});
</script>

async function updateGuestName(paxid, name) {
  const paxIDbody = JSON.stringify({ pxid: paxid, name: name }); // 使用JSON.stringify更规范
  console.log("PaxID:", paxIDbody);
  try {
    const settings = {
      method: "POST",
      headers: {
        "Content-type": "application/json; charset=UTF-8"
      },
      body: paxIDbody,
    };
    const response = await fetch(
      "/change-name.php",
      settings
    );

    if (!response.ok) { // 检查HTTP响应状态码
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log("DATA: ", data);

    // 请求成功并处理完数据后，刷新当前页面
    location.reload();

  } catch (error) {
    console.error("ERROR: ", error); // 使用console.error更清晰
    // 可以在这里显示错误消息给用户
  }
}

function addGuestName(obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  // const addPaxName = itemClicked.nextElementSibling; // 此行似乎未被使用
  const addPaxNameButton = itemClicked.nextElementSibling; // 确保此按钮是 type="button"

  addPaxNameButton.style.display = 'inline-block';
  var addPaxNameField = document.createElement('input');
  addPaxNameField.setAttribute('type', 'text');
  addPaxNameField.setAttribute('name', 'visitorNameSurname[]');
  addPaxNameField.setAttribute('placeholder', 'Enter Name & Surname');
  itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling);
  addPaxNameField.setAttribute("required", "required");

  addPaxNameButton.addEventListener('click', () => {
    const name = addPaxNameField.value;
    updateGuestName(paxid, name);
  });
}