使用Fetch发送POST请求后，若希望阻止页面跳转并刷新当前页面，可以通过以下方式实现：方法一：使用fetch并阻止默认行为（适用于表单提交）如果你是通过<form>提交数据，可以使用event.preventDefault()来阻止页面跳转，然后用fetch发送请求，并在成功后手动刷新页面。<formid="myForm"><inputtype="text"nam

在使用JavaScript Fetch API发送POST请求时，遇到页面跳转问题？本文提供了一种有效的解决方案，**核心在于阻止默认的页面跳转行为并实现自动刷新**。首先，通过将HTML按钮的`type`属性设置为`button`，避免了表单的默认提交。其次，在Fetch请求成功后，利用`location.reload()`方法刷新当前页面，确保用户获得最新的数据视图。本文详细介绍了如何通过修改HTML结构和JavaScript代码，**避免Fetch POST请求后的意外页面跳转**，并提供了错误处理和用户体验方面的注意事项，**助力开发者构建更流畅的Web应用**。

本文旨在指导开发者如何在使用JavaScript Fetch API执行POST请求后，阻止浏览器默认的页面跳转行为，并实现当前页面的自动刷新。核心方法包括明确设置按钮类型以避免默认提交，以及在Fetch请求成功完成后调用`location.reload()`。

理解问题：Fetch POST请求后的意外页面跳转

在使用JavaScript的fetch API向后端发送POST请求时，开发者有时会遇到一个常见问题：请求完成后，浏览器会自动跳转到POST请求的目标URL（例如/change-name.php），而不是停留在当前页面（例如names.php）并刷新。

这种行为通常并非由fetch函数本身引起，而是由于触发fetch请求的HTML元素（如按钮）的默认行为。在HTML中，元素的默认type是submit。如果这样的按钮位于一个

元素内部，或者在某些浏览器环境中被解释为触发表单提交，它就会导致页面进行一次完整的表单提交，从而导航到表单的action属性指定的URL，或者如果未指定action，则导航到当前页面。即使通过JavaScript拦截了点击事件并执行了AJAX请求，如果按钮的默认提交行为没有被阻止，页面仍然会跳转。

解决方案：阻止默认行为并刷新页面

要解决这个问题，我们需要采取两个主要步骤：

1. 阻止触发fetch请求的HTML元素的默认提交行为。
2. 在fetch请求成功完成后，手动刷新当前页面。

步骤一：阻止HTML元素的默认提交行为

最直接的方法是确保触发AJAX请求的按钮不会触发默认的表单提交。

方法一：明确指定按钮类型为button

如果你的按钮不用于传统的表单提交，而仅仅是作为触发JavaScript函数的元素，那么最简单且推荐的做法是将其type属性明确设置为button。

原始HTML片段：

<button class="addPaxName btn btn-xs btn-warning">ADD</button>

修改后的HTML片段：

<button type="button" class="addPaxName btn btn-xs btn-warning">ADD</button>

通过添加type="button"，该按钮将不再具有提交表单的默认行为，从而避免了页面跳转。

方法二：使用event.preventDefault()（适用于表单提交事件）

如果你的按钮确实是type="submit"，并且它在一个元素内部，但你希望通过AJAX来处理提交而不是进行页面跳转，那么你需要在表单的submit事件监听器中使用event.preventDefault()。

示例（如果按钮在表单内并需要阻止表单提交）：

<form id="myForm">
  &lt;input type=&quot;text&quot; name=&quot;name&quot; /&gt;
  <button type="submit">提交</button>
</form>

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

在你的具体场景中，由于按钮的点击事件直接绑定了updateGuestName函数，且没有明确的元素，修改按钮类型为type="button"是更合适的解决方案。

步骤二：在Fetch请求成功后刷新页面

一旦fetch请求成功完成，并且你已经处理了服务器返回的数据，就可以使用location.reload()方法来刷新当前页面。

location.reload()会重新加载当前URL，就像用户点击了浏览器的刷新按钮一样。

修改后的JavaScript代码：

我们将location.reload()添加到updateGuestName函数的try块中，确保只有在fetch请求成功并处理完响应后才执行刷新。

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

注意事项：

• 错误处理： 在fetch请求中，务必包含错误处理逻辑。在try...catch块中捕获网络错误或服务器返回的非成功状态码，并在刷新页面前决定是否需要显示错误信息。
• 用户体验： 页面刷新可能会中断用户体验。如果可能，考虑使用局部更新DOM的方式来避免整个页面刷新，只更新需要变化的部分。然而，对于某些需要确保数据一致性或复杂状态重置的场景，页面刷新是简单有效的方案。
• JSON.stringify： 在构建POST请求的body时，直接拼接字符串容易出错，推荐使用JSON.stringify()来将JavaScript对象转换为JSON字符串，这更安全和规范。

总结

通过将触发AJAX请求的按钮type属性设置为button，并结合在fetch请求成功回调中调用location.reload()，我们可以有效地阻止页面跳转，并在数据更新后实现当前页面的自动刷新。这种方法确保了用户停留在原页面，同时获得了最新的数据视图，提升了用户体验。在实现过程中，请务必注意代码的健壮性，特别是错误处理部分。

今天关于《使用Fetch发送POST请求后，若希望阻止页面跳转并刷新当前页面，可以通过以下方式实现：方法一：使用fetch并阻止默认行为（适用于表单提交）如果你是通过提交数据，可以使用event.preventDefault()来阻止页面跳转，然后用fetch发送请求，并在成功后手动刷新页面。提交

方法二：直接使用fetch不依赖表单如果你是通过JavaScript直接发送POST请求，而不是通过表单提交，那么页面不会自动跳转，你只需要在请求完成后手动刷新页面即可。fetch('/your-endpoint',{method:'POST',headers》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！