提交前的按钮 js - Javascript

提交前的按钮 (又被称为防止重复提交按钮) 是 Web 表单设计中常见的一种方式，它能帮助用户避免反复提交重复数据，提供更好的用户体验。

实现原理

当用户点击提交按钮时，提交前的按钮会使用 JavaScript 阻止表单的默认提交行为，通过将按钮设置为不可用，来防止用户重复提交表单数据。然后，它会使用 AJAX (异步 JavaScript 和 XML) 技术将表单数据发送到服务器，收到服务器的响应后，按钮将重新激活。

代码示例

const submitBtn = document.querySelector('#submitBtn');

submitBtn.addEventListener('click', function(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();

  // 将提交按钮设置为不可用
  submitBtn.disabled = true;

  // AJAX 发送表单数据到服务器
  fetch('https://example.com/submit', {
    method: 'POST',
    body: new FormData(document.querySelector('form'))
  })
  .then(function(response) {
    // 收到服务器的响应后，重新激活提交按钮
    submitBtn.disabled = false;
    // 处理服务器的响应
  })
  .catch(function(error) {
    // 发生错误时，还原提交按钮状态
    submitBtn.disabled = false;
    console.error(error);
  });
});

总结

提交前的按钮是一种很方便的 Web 表单设计方式，它可以提供更好的用户体验，避免用户多次提交表单数据。通过使用 JavaScript 和 AJAX 技术，我们可以实现一个简单而有效的提交前的按钮。