本文旨在指导开发者如何在使用JavaScript Fetch API执行POST请求后，阻止浏览器默认的页面跳转行为，并实现当前页面的自动刷新。核心方法包括明确设置按钮类型以避免默认提交，以及在Fetch请求成功完成后调用`location.reload()`。
理解问题：Fetch POST请求后的意外页面跳转
在使用JavaScript的fetch API向后端发送POST请求时，开发者有时会遇到一个常见问题：请求完成后，浏览器会自动跳转到POST请求的目标URL（例如/change-name.php），而不是停留在当前页面（例如names.php）并刷新。
这种行为通常并非由fetch函数本身引起，而是由于触发fetch请求的HTML元素（如按钮）的默认行为。在HTML中，
解决方案：阻止默认行为并刷新页面
要解决这个问题，我们需要采取两个主要步骤：
立即学习“Java免费学习笔记（深入）”；
阻止触发fetch请求的HTML元素的默认提交行为。在fetch请求成功完成后，手动刷新当前页面。
步骤一：阻止HTML元素的默认提交行为
最直接的方法是确保触发AJAX请求的按钮不会触发默认的表单提交。
方法一：明确指定按钮类型为button
如果你的按钮不用于传统的表单提交，而仅仅是作为触发JavaScript函数的元素，那么最简单且推荐的做法是将其type属性明确设置为button。
原始HTML片段：
修改后的HTML片段：
通过添加type=”button”，该按钮将不再具有提交表单的默认行为，从而避免了页面跳转。
方法二：使用event.preventDefault()（适用于表单提交事件）
如果你的按钮确实是type=”submit”，并且它在一个
以上就是JavaScript Fetch POST请求后防止页面跳转并刷新当前页面的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1323630.html
微信扫一扫 
支付宝扫一扫 
