HTML 提交表单而不重新加载页面

在本文中，我们将介绍如何使用HTML提交表单而不重新加载页面的方法。

阅读更多：HTML 教程

使用AJAX进行异步请求

在HTML中，我们可以使用AJAX（Asynchronous JavaScript and XML）进行异步请求，实现在不重新加载整个页面的情况下提交表单。

首先，我们需要在HTML表单中添加一个事件监听器来阻止表单的默认提交行为。这可以通过在表单元素上添加一个onsubmit属性，并指定一个JavaScript函数来实现。

<form onsubmit="submitForm(event)">
  <!-- 表单内容 -->
</form>

<script>
  function submitForm(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    // 处理表单数据并发送异步请求
    // 这里可以使用XMLHttpRequest对象或者jquery的$.ajax()函数等来发送请求
  }
</script>

上述代码中的submitForm函数会在表单提交时被调用，我们通过event.preventDefault()方法来阻止表单的默认提交行为。

接下来，我们需要在submitForm函数中处理表单数据并发送异步请求。可以使用XMLHttpRequest对象或者jquery的$.ajax()函数等来发送请求，这里需要根据具体情况选择合适的方式。

下面是一个使用XMLHttpRequest对象发送异步请求的示例：

function submitForm(event) {
  event.preventDefault();

  var form = event.target; // 获取表单元素
  var formData = new FormData(form); // 获取表单数据

  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true); // 设置请求方法和URL
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      // 请求成功，可以在这里处理返回的数据
    }
  };
  xhr.send(formData); // 发送请求
}

上述代码中，我们首先获取表单元素form，然后使用FormData对象获取表单数据formData。

接下来，我们创建一个XMLHttpRequest对象xhr，并使用open方法设置请求的方法和URL。在onreadystatechange事件中，我们可以判断xhr.readyState和xhr.status来判断请求的状态，并在请求成功时进行处理。

最后，我们使用send方法发送请求。

需要注意的是，如果表单需要在某些字段上设置特殊的请求头信息，比如enctype、authorization等，需要自行调整代码。

使用jQuery进行表单提交

上面的示例是通过原生JavaScript来发送异步请求的方法，如果你使用了jQuery库，可以更加简化地实现表单提交。

首先，需要在HTML页面中引入jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，我们可以使用$.ajax()函数来发送异步请求。

<form id="myForm">
  <!-- 表单内容 -->
</form>

<script>
   $("#myForm").submit(function(event) { event.preventDefault(); var formData =$ (this).serialize(); // 获取表单数据

     $.ajax({ type: 'POST', // 设置请求方法 url:$ (this).attr('action'), // 设置请求URL
      data: formData, // 设置请求数据
      success: function(response) {
        // 请求成功，可以在这里处理返回的数据
      }
    });
  });
</script>

上述代码中，我们为表单元素添加了一个ID属性myForm，并使用$("#myForm")来选中该表单元素。

在submit事件处理函数中，我们使用$(this).serialize()来获取表单数据，然后使用$.ajax()函数发送异步请求。在ajax的success属性中，可以处理请求成功后返回的数据。