告别AJAX实现无刷新提交表单

为了实现无刷新提交表单，我们通常会使用AJAX技术，但是这种方式会增加网站的复杂度和开发难度。在本文中，我将分享一些告别AJAX实现无刷新提交表单的方法。

使用表单提交事件

首先，我们可以利用表单提交事件（form submit）来实现无刷新提交。当用户在提交表单时，浏览器会发送请求并刷新页面。为了避免页面的刷新，我们可以在表单提交事件中使用AJAX来发送数据和获取响应，并阻止默认的表单提交行为。下面是一个示例代码：

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

<script>
  // 获取表单元素和提交按钮
  const form = document.getElementById('myForm');
  const submitBtn = form.querySelector('button[type="submit"]');

  // 给表单添加提交事件
  form.addEventListener('submit', (event) => {
    // 阻止默认的表单提交行为
    event.preventDefault();

    // 发送AJAX请求
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/submit-form');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = () => {
      const response = JSON.parse(xhr.responseText);
      console.log(response);
    };
    xhr.send(JSON.stringify({
      name: form.name.value,
      email: form.email.value,
    }));
  });
</script>

上面的代码中，我们通过给表单添加提交事件，来阻止默认的表单提交行为，并使用AJAX发送数据和获取响应。这样就可以避免页面的刷新，达到无刷新提交表单的效果。

使用Fetch API

除了使用表单提交事件，我们还可以使用Fetch API来实现无刷新提交。Fetch API是一种新的网络请求API，提供了更简洁和易于使用的接口。下面是一个使用Fetch API提交表单数据的示例代码：

<form id="myForm">
  <input type="text" name="name">
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');
  const submitBtn = form.querySelector('button[type="submit"]');

  form.addEventListener('submit', (event) => {
    event.preventDefault();

    // 使用Fetch API发送请求
    fetch('/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: form.name.value,
        email: form.email.value,
      }),
    }).then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  });
</script>

上面的代码中，我们使用Fetch API发送POST请求，发送的数据是JSON格式的字符串，然后解析响应的JSON数据，并打印到控制台。这样就可以在不刷新页面的情况下提交表单数据了。

示例1：基于表单提交事件的无刷新提交示例

示例2：基于Fetch API的无刷新提交示例