js提交表单请求不跳转页面怎么做？

2024-12-22 03:16:50 JS 1959

在前端开发中，通常需要通过JavaScript来处理表单提交，并且希望在提交表单时不刷新页面。这可以通过以下几种方式实现：

1. 使用 `preventDefault` 阻止默认表单提交行为

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Submission Without Page Reload</title>
</head>
<body>

  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="submit">Submit</button>
  </form>

  <script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止表单的默认提交行为
      
      // 获取表单数据
      let formData = new FormData(this);
      
      // 可以使用 fetch 或者 XMLHttpRequest 发送请求
      fetch('/submit-url', {
        method: 'POST',
        body: formData
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        console.log('Success:', data);
        // 可以根据返回的数据做出相应的处理
      })
      .catch(error => {
        console.error('Error:', error);
        // 处理请求发送失败的情况
      });
    });
  </script>

</body>
</html>

解释：

HTML 表单: 使用普通的 HTML 表单结构，其中包括一个 submit 类型的按钮。
JavaScript 事件监听: 使用 addEventListener 方法监听表单的 submit 事件。
event.preventDefault(): 在事件处理程序中，调用 event.preventDefault() 阻止表单的默认提交行为，即防止页面刷新。
FormData: 使用 FormData 对象来收集表单数据，它会自动将表单字段转换为键值对。
fetch API: 使用现代的 fetch API 或者 XMLHttpRequest 发送异步请求到服务器。
处理响应: 使用 fetch 的 then() 方法处理服务器返回的响应数据，根据需要处理成功或失败的情况。

2. 使用 XMLHttpRequest

如果你选择使用 XMLHttpRequest 而不是 fetch，代码会稍有不同：

javascript
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-url', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log('Success:', response);
    // 处理成功的情况
  } else if (xhr.readyState === 4 && xhr.status !== 200) {
    console.error('Error:', xhr.responseText);
    // 处理失败的情况
  }
};
xhr.send(formData);

这段代码使用了 XMLHttpRequest 发送 POST 请求，并在状态改变时处理响应。

注意事项：

跨域请求: 如果你的表单提交目标不在同一个域名下，可能会面临跨域请求的限制问题，需要服务器端进行相应的配置（如设置 CORS 头）。
安全性: 对于用户输入的数据，应该进行验证和清理，以防止 XSS 攻击和其他安全问题。

通过这些方法，你可以在不刷新页面的情况下处理表单提交，并且能够方便地处理服务器返回的数据。

1. 使用 preventDefault 阻止默认表单提交行为

解释：

2. 使用 XMLHttpRequest

注意事项：

1. 使用 `preventDefault` 阻止默认表单提交行为