解决异步Fetch POST请求后意外页面跳转与实现页面刷新

function addGuestName(obj) {
  // ... 其他代码 ...
  var addPaxNameField = document.createElement('input');
  // ... 设置输入框属性 ...

  // 创建一个按钮，并明确指定其类型为 'button'
  var addPaxNameButton = document.createElement('button'); // 假设这里是动态创建按钮
  addPaxNameButton.setAttribute('type', 'button'); // 关键：设置为 'button'
  addPaxNameButton.className = 'addPaxName btn btn-xs btn-warning';
  addPaxNameButton.textContent = 'ADD';

  itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling);
  itemClicked.parentNode.insertBefore(addPaxNameButton, addPaxNameField.nextSibling); // 将按钮插入到输入框之后

  addPaxNameButton.addEventListener('click', () => { // 监听动态创建的按钮
    const name = addPaxNameField.value;
    updateGuestName(paxid, name);
  });
}

function addGuestName(obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  const addPaxNameButton = itemClicked.nextElementSibling; // 假设这是原始HTML中的ADD按钮

  // ... 其他代码 ...

  addPaxNameButton.addEventListener('click', (event) => { // 传入事件对象
    event.preventDefault(); // 阻止按钮的默认行为（如表单提交）
    const name = addPaxNameField.value;
    updateGuestName(paxid, name);
  });
}

async function updateGuestName(paxid, name) {
  paxIDbody = '{"pxid": "' + paxid + '", "name": "' + name + '"}';
  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) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

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

    // 数据更新成功后，刷新当前页面
    location.reload();

  } catch (error) {
    console.log("ERROR: ", error);
    // 在错误发生时，可以考虑向用户显示错误消息，而不是刷新页面
  }
}

<!-- 假设这是 names.php 页面上的部分HTML -->
<!-- 确保这里的ADD按钮是 type="button" 或者其父级没有隐式提交表单 -->
<span id="guest-123" onclick="addGuestName(this)">
    <!-- 如果这个ADD按钮是原始HTML中的，确保它是 type="button" -->
    <button type="button" class="addPaxName btn btn-xs btn-warning">ADD</button>
</span>

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

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

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

    // 假设PHP返回的JSON中有一个状态字段表示操作是否成功
    if (data.status === 'success') { // 根据您的PHP响应结构调整
        alert("姓名更新成功！"); // 可选：给用户一个成功的反馈
        location.reload(); // 成功后刷新页面
    } else {
        alert("姓名更新失败: " + data.message); // 显示服务器返回的错误信息
    }

  } catch (error) {
    console.error("ERROR: ", error); // 使用console.error更合适
    alert("请求失败，请稍后再试。"); // 向用户显示错误
  }
}

function addGuestName(obj) {
  const itemClicked = obj;
  const paxid = obj.id;
  // 假设 addPaxNameButton 是通过 itemClicked.nextElementSibling 获取的原始HTML按钮
  // 如果是动态创建，请确保设置 type="button"
  const addPaxNameButton = itemClicked.nextElementSibling;

  addPaxNameButton.style.display = 'inline-block';

  // 动态创建输入框
  var addPaxNameField = document.createElement('input');
  addPaxNameField.setAttribute('type', 'text');
  addPaxNameField.setAttribute('name', 'visitorNameSurname[]');
  addPaxNameField.setAttribute('placeholder', 'Enter Name & Surname');
  addPaxNameField.setAttribute("required", "required");
  itemClicked.parentNode.insertBefore(addPaxNameField, itemClicked.nextSibling);

  // 为原始的ADD按钮添加事件监听器
  // 确保这个按钮的type是"button"或者在这里阻止默认行为
  addPaxNameButton.addEventListener('click', (event) => {
    // 如果此按钮可能导致表单提交，则使用 event.preventDefault()
    // event.preventDefault(); 
    const name = addPaxNameField.value;
    if (name) { // 简单验证输入不为空
      updateGuestName(paxid, name);
    } else {
      alert("请输入姓名。");
    }
  });
}
</script>

<?php
// change-name.php
header('Content-type:application/json;charset=utf-8');
// ... 数据库更新逻辑 ...
$status = 'success'; // 或 'error'
$message = 'Name updated successfully'; // 或具体的错误信息

$myObj = new \stdClass();
$myObj->status = $status;
$myObj->message = $message;
$myJSON = json_encode($myObj);
echo $myJSON;
?>