在使用javascript的`fetch` api进行异步post请求时，开发者常遇到请求完成后页面意外跳转至api端点的问题。本文将详细介绍如何通过设置按钮类型为`button`或在表单提交事件中使用`event.preventdefault()`来阻止默认的页面导航行为，并在`fetch`请求成功后利用`location.reload()`方法刷新当前页面，从而实现无缝的用户体验。
异步请求后页面跳转的常见原因与解决方案
在使用fetch API向后端发送数据，尤其是通过POST请求更新数据时，我们通常希望在数据更新后，用户仍然停留在当前页面，并且页面内容能够反映最新的数据变化。然而，一个常见的困扰是，在请求完成后，浏览器可能会自动导航到POST请求的目标URL（即API端点）。这通常不是我们期望的行为，因为它破坏了单页应用或局部更新的用户体验。
导致这种行为的主要原因是：
按钮的默认行为： HTML中的zuojiankuohaophpcnbutton>元素，如果它位于<form>标签内部且没有明确指定type属性，其默认类型为submit。点击submit类型的按钮会导致表单提交，进而触发页面导航到表单的action属性指定的URL。未阻止的表单提交： 即使按钮不在表单内，或者通过Javascript动态创建，如果其行为最终模拟了表单提交，也可能导致页面跳转。要解决这个问题，我们需要采取两个核心步骤：阻止页面导航和在请求成功后刷新当前页面。
1. 阻止默认的页面导航行为
根据按钮的使用场景，有以下两种主要的阻止页面导航的方法：
方法一：明确指定按钮类型为 button
如果你的按钮是用来触发Javascript函数，而不是提交整个表单，那么最直接的方法就是将其type属性设置为"button"。这将明确告诉浏览器，该按钮不应触发传统的表单提交行为。
示例 HTML：
<!-- 原始的 span 标签可能间接触发了某些行为，我们关注的是内部的 button --><span onclick="addGuestName(this)"> <button class="addPaxName btn btn-xs btn-warning" type="button">ADD</button></span>登录后复制
通过添加type="button"，点击此按钮将不再导致页面跳转。
方法二：在表单提交事件中阻止默认行为 (event.preventDefault())
如果你的按钮确实在一个<form>标签内，并且你希望通过Javascript来处理提交逻辑而不是让浏览器执行默认的表单提交，那么你需要在表单的submit事件监听器中使用event.preventDefault()。
示例 HTML (假设按钮在一个表单内):
<form id="guestForm"> <!-- 其他表单元素 --> <button type="submit" class="addPaxName btn btn-xs btn-warning">ADD</button></form>登录后复制
示例 Javascript：
多面鹅 面向求职者的AI面试平台
25 查看详情 
document.getElementById('guestForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单的默认提交行为 // 在这里调用你的异步 fetch 函数 // updateGuestName(paxid, name);});登录后复制在你的原始代码中，按钮是通过addEventListener('click', ...)来触发updateGuestName函数的，并且按钮是动态创建的。如果该按钮没有被明确指定type="button"，且其父元素或祖先元素是<form>，那么它仍可能被视为submit按钮。因此，最稳妥的做法是确保动态创建的按钮也设置了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接口，不应该尝试进行页面重定向。
<?phpheader('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请求后停留在当前页面并刷新，关键在于：
阻止默认导航： 确保触发fetch请求的按钮具有type="button"属性，或者如果按钮位于表单中，使用event.preventDefault()来阻止表单的默认提交行为。页面刷新： 在fetch请求成功完成并处理完响应数据后，调用location.reload()来刷新当前页面，以显示最新的数据状态。通过以上步骤，你将能够构建一个更加用户友好和功能完善的异步数据更新流程。
以上就是使用异步Fetch POST请求后防止页面跳转并刷新当前页面的教程的详细内容，更多请关注php中文网其它相关文章！
