如何在Axios原生JS提交Formspree表单时实现beforeSend功能？

API 探路者

2026-5-29

实现原生JS版的Formspree表单提交（包含beforeSend状态提示）

嘿，其实你要实现的beforeSend功能在原生JS里超级直接——不需要像jQuery那样依赖特定的钩子函数，只需要在发起axios请求之前，直接修改提交按钮的状态和文本就可以啦！

原jQuery代码里的beforeSend就是在请求发送前执行的逻辑，我们把这部分逻辑直接移到axios调用的前面就行，然后再在请求成功/失败的回调里恢复按钮的初始状态，和你原来的jQuery逻辑完全对齐。

下面是修改后的完整原生JS代码：

const form = document.querySelector('form');
form.addEventListener("submit", function(e){
  e.preventDefault();
  const submitBtn = form.querySelector('.contact__submit');
  const defaultSubmitText = submitBtn.innerHTML;

  // 这里就是对应jQuery的beforeSend逻辑
  submitBtn.disabled = true;
  submitBtn.innerHTML = 'Sending message…';

  axios({
    method: 'post',
    url: 'https://formspree.io/your@email.com',
    data: serialize(form) // 用你提到的序列化函数
  })
  .then(function(response) {
    console.log('SENT!!', response.data);
    submitBtn.innerHTML = 'Message sent!';
    // 5秒后恢复按钮初始状态
    setTimeout(function() {
      submitBtn.disabled = false;
      submitBtn.innerHTML = defaultSubmitText;
    }, 5000);
  })
  .catch(function(){
    console.log('ERROR!!');
    submitBtn.innerHTML = 'Oops, there was an error.';
    // 同样5秒后恢复
    setTimeout(function() {
      submitBtn.disabled = false;
      submitBtn.innerHTML = defaultSubmitText;
    }, 5000);
  });
});