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

示例 HTML (假设按钮在一个表单内):

Q.AI视频生成工具

支持一分钟生成专业级短视频，多种生成方式，AI视频脚本，在线云编辑，画面自由替换，热门配音媲美真人音色，更多强大功能尽在QAI

下载

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

示例 JavaScript：

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

在你的原始代码中，按钮是通过addEventListener('click', ...)来触发updateGuestName函数的，并且按钮是动态创建的。如果该按钮没有被明确指定type="button"，且其父元素或祖先元素是

修改addGuestName函数中创建按钮的部分：

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);
    // 在这里可以考虑移除输入框或禁用按钮，提供用户反馈
  });
}

2. 在 fetch 请求成功后刷新当前页面

在阻止了页面跳转之后，我们需要在fetch请求成功完成并数据更新后，刷新当前页面以显示最新的数据。这可以通过location.reload()方法实现。

location.reload()方法会重新加载当前文档。它有一个可选的布尔参数，如果设置为true，则会强制浏览器从服务器重新加载页面，而不是从缓存中加载。通常情况下，不带参数或设置为false即可。

将location.reload()集成到你的async函数中：

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 打印错误
    // 可以在这里向用户显示错误消息
  }
}

注意事项：

• 错误处理： 在fetch请求中，response.ok属性可以用来检查HTTP响应状态码是否在200-299的范围内。这是一个比仅仅依赖try...catch更健壮的错误处理方式，因为fetch在遇到HTTP错误（如404, 500）时并不会抛出错误，只有在网络问题时才会。
• 用户反馈： 在页面刷新之前，可以考虑给用户一个短暂的反馈，例如显示“正在更新...”或“更新成功！”的消息，以提升用户体验。
• JSON.stringify： 使用JSON.stringify()来构建JSON请求体比手动拼接字符串更安全、更健壮，可以避免潜在的格式错误和注入问题。

PHP 后端端点

你的PHP后端端点返回JSON数据是正确的做法，它作为一个API接口，不应该尝试进行页面重定向。

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

这个PHP代码是标准的JSON API响应，它不会导致浏览器导航，因此问题出在前端按钮的默认行为。

总结

要实现在异步fetch POST请求后停留在当前页面并刷新，关键在于：

1. 阻止默认导航： 确保触发fetch请求的按钮具有type="button"属性，或者如果按钮位于表单中，使用event.preventDefault()来阻止表单的默认提交行为。
2. 页面刷新： 在fetch请求成功完成并处理完响应数据后，调用location.reload()来刷新当前页面，以显示最新的数据状态。

通过以上步骤，你将能够构建一个更加用户友好和功能完善的异步数据更新流程。