用AJAX写一个表单提交

HTML代码：

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

JavaScript代码：

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

submitBtn.addEventListener('click', (e) => {
  e.preventDefault(); // 阻止表单默认提交行为
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit-form');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
        alert('Form submitted successfully!');
      } else {
        alert('Form submission failed.');
      }
    }
  };
  xhr.send(formData);
});

这段代码监听了表单提交按钮的点击事件，阻止了表单默认提交行为，使用FormData对象获取表单数据，使用XMLHttpRequest对象发送POST请求。在请求完成后，根据请求状态和响应状态码判断表单提交是否成功。如果成功，弹出提示框；如果失败，也弹出提示框