使用异步Fetch POST请求后防止页面跳转并刷新当前页面的教程

<!-- 原始的 span 标签可能间接触发了某些行为，我们关注的是内部的 button -->
<span onclick="addGuestName(this)">
    <button class="addPaxName btn btn-xs btn-warning" type="button">ADD</button>
</span>

<form id="guestForm">
    <!-- 其他表单元素 -->
    <button type="submit" class="addPaxName btn btn-xs btn-warning">ADD</button>
</form>

document.getElementById('guestForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    // 在这里调用你的异步 fetch 函数
    // updateGuestName(paxid, name);
});

function addGuestName(obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  const addPaxNameButton = itemClicked.nextElementSibling; // 假设这是已有的ADD按钮
  addPaxNameButton.style.display = 'inline-block';
  // 确保这里创建的按钮或已有的按钮有 type="button"
  // 如果是动态创建的，可以在这里设置
  // addPaxNameButton.setAttribute('type', 'button'); // 如果需要修改已有按钮类型

  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");

  // 监听 ADD 按钮的点击事件
  addPaxNameButton.addEventListener('click', () => {
    const name = addPaxNameField.value;
    updateGuestName(paxid, name);
    // 在这里可以考虑移除输入框或禁用按钮，提供用户反馈
  });
}

async function updateGuestName(paxid, name) {
  const paxIDbody = JSON.stringify({ pxid: paxid, name: name }); // 更安全的 JSON 字符串化方式
  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 打印错误
    // 可以在这里向用户显示错误消息
  }
}

<?php
header('Content-type:application/json;charset=utf-8');
// 假设 $status 和 $message 变量已根据数据库操作结果设置
$myObj=new \stdClass();
$myObj->status = $status;
$myObj->message = $message;
$myJSON = json_encode($myObj);
echo $myJSON;
?>