如何在不刷新页面的情况下获取表单数据

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var formData = {
    name: document.getElementById('nameInput').value,
    email: document.getElementById('emailInput').value,
    // 其他表单字段
  };
  // 处理获取到的表单数据
  console.log(formData);
});

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var formData = new FormData(this); // 创建FormData对象，将表单数据包装起来
  // 使用Ajax发送异步请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit-form', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，处理返回的数据
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
});

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" type="text" placeholder="Name">
    <input v-model="formData.email" type="email" placeholder="Email">
    <!-- 其他表单字段 -->
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        // 其他表单字段
      }
    };
  },
  methods: {
    handleSubmit() {
      // 处理获取到的表单数据
      console.log(this.formData);
    }
  }
};
</script>