js实现表单的提交

使用原生JavaScript提交表单

通过监听表单的submit事件，阻止默认提交行为，使用fetch或XMLHttpRequest发送数据。

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);

  fetch('/submit-url', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
});

使用jQuery提交表单

如果项目中已引入jQuery库，可以使用更简洁的ajax方法。

$('#myForm').submit(function(e) {
  e.preventDefault();

  $.ajax({
    url: '/submit-url',
    type: 'POST',
    data: $(this).serialize(),
    success: function(data) {
      console.log(data);
    },
    error: function(xhr) {
      console.error(xhr.statusText);
    }
  });
});

表单数据验证

在提交前进行客户端验证，确保数据符合要求。

function validateForm() {
  const email = document.getElementById('email').value;
  if (!/^\w+@\w+\.\w+$/.test(email)) {
    alert('请输入有效的邮箱地址');
    return false;
  }
  return true;
}

document.getElementById('myForm').addEventListener('submit', function(e) {
  if (!validateForm()) {
    e.preventDefault();
  }
});

处理文件上传

当表单包含文件输入时，需要使用FormData对象处理。

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);

  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    document.getElementById('result').innerHTML = '上传成功';
  })
  .catch(error => {
    document.getElementById('result').innerHTML = '上传失败';
  });
});

使用axios提交表单

axios提供了更现代的HTTP客户端功能。

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();

  axios.post('/submit-url', new FormData(this), {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error.response.data);
  });
});