如何在Vue 3组合式API中用Ajax避免表单提交后页面跳转

核心方案 #

通过**异步请求（Fetch API）**替代表单默认提交行为，阻止页面跳转，同时完成数据提交到Google Apps Script，实现邮件发送和Google Sheets存储功能。

具体实现步骤 #

1. 修改Vue表单的提交逻辑 #

给表单绑定@submit.prevent阻止默认跳转，关联自定义提交方法：

<template>
  <div class="form-container">
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>姓名</label>
        <input v-model="formData.name" type="text" required />
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="formData.email" type="email" required />
      </div>
      <div class="form-group">
        <label>留言</label>
        <textarea v-model="formData.message" rows="4" required></textarea>
      </div>
      <button type="submit" :disabled="submitStatus === '提交中...'">
        {{ submitStatus || '提交' }}
      </button>
      <p v-if="submitStatus" class="status">{{ submitStatus }}</p>
    </form>
  </div>
</template>

2. 编写异步提交方法 #

在Vue组件的methods中实现异步提交逻辑，用Fetch发送数据：

<script>
export default {
  data() {
    return {
      formData: { name: '', email: '', message: '' },
      submitStatus: ''
    }
  },
  methods: {
    async handleSubmit() {
      this.submitStatus = '提交中...'
      const GOOGLE_SCRIPT_URL = '替换为你的Google Apps Script部署URL'

      try {
        const response = await fetch(GOOGLE_SCRIPT_URL, {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body: new URLSearchParams(this.formData).toString()
        })

        const result = await response.json()
        if (result.result === 'success') {
          this.submitStatus = '提交成功！'
          this.formData = { name: '', email: '', message: '' } // 重置表单
        } else {
          this.submitStatus = '提交失败，请重试'
        }
      } catch (err) {
        this.submitStatus = '提交出错，请检查网络'
        console.error('提交错误:', err)
      }
    }
  }
}
</script>

3. 调整Google Apps Script的响应格式 #

确保doPost函数返回JSON格式响应，避免触发页面跳转：

function doPost(e) {
  try {
    // 写入Google Sheets逻辑（保留你原有代码）
    const sheet = SpreadsheetApp.openById('你的表格ID').getActiveSheet()
    sheet.appendRow([new Date(), e.parameter.name, e.parameter.email, e.parameter.message])

    // 发送邮件逻辑（保留你原有代码）
    MailApp.sendEmail({
      to: '你的接收邮箱',
      subject: '新表单提交通知',
      body: `姓名: ${e.parameter.name}\n邮箱: ${e.parameter.email}\n留言: ${e.parameter.message}`
    })

    // 返回成功响应
    return ContentService.createTextOutput(JSON.stringify({ result: 'success' }))
      .setMimeType(ContentService.MimeType.JSON)
  } catch (error) {
    // 返回错误响应
    return ContentService.createTextOutput(JSON.stringify({ result: 'error', msg: error.toString() }))
      .setMimeType(ContentService.MimeType.JSON)
  }
}

关键注意事项 #

• Google Apps Script部署时，必须设置“谁可以访问应用”为“任何人，甚至匿名”，否则会出现权限拒绝错误。
• 复制部署生成的完整URL替换代码中的GOOGLE_SCRIPT_URL，不要使用编辑器里的测试URL。
• 测试时若遇到CORS问题，确认Google Script部署的权限设置正确，通常官方部署的Web应用默认支持跨域。

内容的提问来源于stack exchange，提问作者coochie