如何在不重新加载页面的情况下提交表单

Question

如何在页面加载时自动提交表单。

我的代码如下。只需重新加载页面

<form method="POST" id="formID">
  <input type="text" name="item" value="food" />
</form>             
<script> 
  window.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById('formID').submit();
  });
</script>

Answer 1

这是一种无需重新加载整个页面即可提交表单的方法。使用异步 AJAX。 要在页面加载时自动提交表单而不重新加载页面，您需要使用 JavaScript 异步提交表单。

您可以这样做：

<form id="myForm" method="POST">
  <input type="text" name="item" value="food">
</form>

<script>
window.addEventListener('load', () => {
  const form = document.getElementById('myForm');

  // Submit form asynchronously via AJAX
  const request = new XMLHttpRequest();
  request.open('POST', '/submit-url'); 
  request.send(new FormData(form));
});
</script>

要点：

• 使用

  addEventListener('load')

  等待整页加载
• 创建 XMLHttpRequest 对象，通过 AJAX 异步提交表单数据
• 打开对提交 URL 的 POST 请求
• 发送从表单元素创建的表单数据实例

这允许提交表单而无需重新加载页面。提交操作在后台异步处理。

总结一下：

1. 获取表单元素
2. 创建 XMLHttpRequest 对象
3. 打开 POST 请求
4. 异步发送表单数据

这是在页面加载时自动提交表单而无需重新加载的 JavaScript 方式。试用。我希望它能达到您的目的。