Node.js中点击HTML按钮先做GET校验再发起POST请求如何实现

不需要提前将GET请求结果存入全局变量，只需要在请求的回调逻辑中直接处理判断即可。有两种常见实现方式，分别对应前端异步拦截校验、后端合并校验两种场景，具体实现示例如下：

提示：如果你的场景允许提交后刷新页面，优先选方案2，实现成本更低；如果需要前端无刷新提示，选方案1。

方案1：前端拦截表单提交，先校验再决定是否发起POST #

前端修改（HTML+JS） #

拦截表单默认提交行为，先调用GET校验接口，校验通过后再手动提交POST请求：

<form action="/generate_survey" method="POST" id="gen_survey">
    <button type="submit" class="btn btn-primary my-3">Get Survey Link</button>
    <!-- 用于展示校验失败提示 -->
    <div id="err_msg" class="text-danger mt-2"></div>
</form>

<script>
const form = document.getElementById('gen_survey')
const errMsg = document.getElementById('err_msg')

form.addEventListener('submit', async (e) => {
  // 阻止默认POST提交
  e.preventDefault()
  errMsg.textContent = ''

  try {
    // 先发起GET校验请求
    const checkRes = await fetch('/generate_survey', { method: 'GET' })
    const checkResult = await checkRes.json()

    if (checkResult.pass) {
      // 校验通过，手动提交原表单的POST请求
      form.submit()
    } else {
      // 校验不通过，直接展示GET返回的结果
      errMsg.textContent = checkResult.message
    }
  } catch (e) {
    errMsg.textContent = '校验请求失败，请重试'
  }
})
</script>

后端修改 #

1. 路由配置（router.js）

需要补充POST请求的路由：

// 原校验用GET接口
route.get('/generate_survey', controller.test)
// 新增POST接口，处理校验通过后的业务逻辑
route.post('/generate_survey', controller.generateSurvey)

2. 控制器代码（controller.js）

// GET接口：校验逻辑
exports.test = async (req, res) => {
  try {
    // 这里写你的数据库查询逻辑，确认是否存在指定值
    const exist = await db.query('SELECT 1 FROM your_table WHERE target_field = ?', [要校验的值])
    
    if (exist.length > 0) {
      // 校验通过
      return res.json({ pass: true })
    } else {
      // 校验不通过，返回提示信息
      return res.json({ pass: false, message: '指定值不存在，无法生成问卷' })
    }
  } catch (err) {
    return res.status(500).json({ pass: false, message: '服务器错误' })
  }
}

// POST接口：校验通过后的业务逻辑
exports.generateSurvey = async (req, res) => {
  // 这里写原来的POST请求要处理的逻辑，比如生成问卷链接、返回页面等
  const surveyUrl = await createSurveyLogic()
  res.send(`问卷链接：${surveyUrl}`)
}

方案2：后端合并校验逻辑（更简洁，无需前端修改异步逻辑） #

如果不想前端写拦截逻辑，可以直接把校验步骤合并到POST接口中，后端收到POST请求后先做校验，再决定执行业务逻辑还是返回错误：

路由配置（router.js） #

// 只保留POST接口即可，GET接口可以删掉
route.post('/generate_survey', controller.generateSurvey)

控制器代码（controller.js） #

exports.generateSurvey = async (req, res) => {
  try {
    // 第一步：先做校验，相当于之前GET接口的逻辑
    const exist = await db.query('SELECT 1 FROM your_table WHERE target_field = ?', [要校验的值])
    if (exist.length === 0) {
      // 校验不通过，直接返回错误结果
      return res.send('指定值不存在，无法生成问卷')
    }

    // 第二步：校验通过，执行原POST的业务逻辑
    const surveyUrl = await createSurveyLogic()
    res.send(`问卷链接：${surveyUrl}`)
  } catch (err) {
    res.status(500).send('服务器错误')
  }
}

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