以提交表单而不重定向 - Javascript

在传统的表单提交方式中，页面通常会被重定向到新的 URL 地址来处理表单的数据。但是，在某些情况下，可能需要在提交表单时不重定向页面，而是通过 Ajax 来处理表单数据。

本文将介绍如何使用 Javascript 和 Ajax 来完成表单提交而不重定向页面的方法。

Step 1 - 监听表单提交事件

首先，我们需要在 Javascript 中监听表单的提交事件，并阻止默认的提交行为，使页面不进行跳转。可以使用以下代码：

document.querySelector('form').addEventListener('submit', function (event) {
  event.preventDefault();
  
  // 在这里编写处理表单的代码
});

在这个例子中，我们使用 querySelector() 函数来获取第一个表单元素，并使用 addEventListener() 来监听其提交事件。

Step 2 - 获取表单数据

接下来，我们需要获取表单中的数据。可以使用 FormData 对象来获取表单数据，然后将其转换为 URL 编码的字符串，并将其发送到服务器。

var form = document.querySelector('form');
var formData = new FormData(form);

// 将 formData 转换为 URL 编码的字符串
var encodedData = new URLSearchParams(formData).toString();

// 发送数据到服务器
var request = new XMLHttpRequest();
request.open('POST', '/path/to/server');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send(encodedData);

在这个例子中，我们首先使用 FormData 对象来获取表单数据。然后，我们将其转换为 URL 编码的字符串，并使用 XMLHttpRequest 对象将其发送到服务器。

Step 3 - 处理服务器响应

最后，当服务器响应返回时，我们可以使用 XMLHttpRequest 的 onreadystatechange 事件来处理响应数据，并更新页面上的内容。

var form = document.querySelector('form');
var formData = new FormData(form);

// 将 formData 转换为 URL 编码的字符串
var encodedData = new URLSearchParams(formData).toString();

// 发送数据到服务器
var request = new XMLHttpRequest();
request.open('POST', '/path/to/server');
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function () {
  if (request.readyState === XMLHttpRequest.DONE) {
    if (request.status === 200) {
      // 处理服务器响应
      console.log(request.responseText);
    } else {
      // 处理错误情况
      console.error('提交表单失败');
    }
  }
};
request.send(encodedData);

在这个例子中，我们使用 XMLHttpRequest 的 onreadystatechange 事件来处理服务器响应。当 readyState 的值等于 XMLHttpRequest.DONE 时，表示请求已完成。如果响应状态码等于 200，则表示请求成功，我们可以使用 responseText 属性来获取响应数据。

当请求失败时，可以使用 console.error() 函数来输出错误信息。

完成以上三个步骤后，通过 Ajax 方式提交表单就完成了！不需要页面跳转，也不需要刷新页面。