反应表单重新加载页面 - Javascript

一般来说，当我们在 Web 开发中提交一个表单时，页面会被重新加载并显示表单提交结果。然而，如果我们想要在表单提交后不刷新页面来更新数据，在后台使用 Ajax 发送请求是一个常见的解决方案。但是，如果您想继续使用传统的表单提交方式，您可以使用 JavaScript 实现在表单提交后立即重新加载页面的方法。

基本思路

基本思路是给表单添加事件监听器，并在表单提交时阻止默认的表单提交行为，然后手动使用 JavaScript 发送表单数据并重新加载页面。

代码实现

HTML：

<form id="myForm" action="/submit-form" method="post">
  <!-- 表单元素 -->
  <button type="submit" id="submitBtn">提交表单</button>
</form>

JavaScript：

const form = document.getElementById("myForm");
const submitBtn = document.getElementById("submitBtn");

form.addEventListener("submit", function (e) {
  // 阻止表单默认提交行为
  e.preventDefault();

  // 使用 fetch 或 Ajax 发送表单数据
  // ...

  // 重新加载页面
  location.reload();
});

代码说明

1. 首先获取表单元素和提交按钮元素。
2. 给表单添加 submit 事件监听器，在监听器中阻止默认的表单提交行为，并手动处理表单数据。
3. 最后使用 location.reload() 方法重新加载页面以更新数据。

总结

使用 JavaScript 在表单提交后重新加载页面可以避免页面刷新带来的不必要的开销，并且可以提高用户体验。通过给表单添加事件监听器和手动处理表单数据，实现这个功能非常简单。