Express.js：客户端如何向服务端发起是非类验证请求的实现疑问

嘿，别着急！你的需求其实是Web开发里非常常见的场景，完全不用一下子去啃复杂的概念，用原生的Fetch API就能轻松搞定，而且代码也很直观。我给你一步步拆解：

第一步：先写好Express服务端的验证接口 #

你需要在服务端创建一个POST接口，用来接收客户端传来的问题标识和用户答案，然后返回“对/错”的结果就行。不用res.send()刷新页面，而是返回JSON格式的数据，这样客户端就能直接解析使用：

const express = require('express');
const app = express();
// 必须加这个，用来解析客户端发送的JSON请求体
app.use(express.json());

// 这里可以换成你实际的问题-答案映射，比如从数据库取也可以
const correctAnswers = {
  "capital-of-france": "Paris",
  "what-is-node": "JavaScript runtime"
};

// 验证答案的接口
app.post('/check-answer', (req, res) => {
  // 从请求体里拿到客户端传的问题ID和用户答案
  const { questionId, userAnswer } = req.body;
  // 判断答案是否正确（注意去掉前后空格，避免用户输入的空格影响结果）
  const isCorrect = correctAnswers[questionId] === userAnswer.trim();
  // 返回JSON结果，客户端可以直接用
  res.json({ success: true, isCorrect });
});

app.listen(3000, () => console.log("服务器跑在3000端口啦"));

第二步：客户端实现无刷新请求和结果展示 #

客户端这边，你只需要给按钮加个点击事件，用Fetch发送POST请求，拿到服务端返回的结果后，直接修改页面上的元素显示对勾或者叉号就行，完全不会刷新页面：

<!-- 假设这是你的问题输入区域 -->
<div>
  <p>问题：法国的首都是？</p>
  <input type="text" id="answerInput" placeholder="请输入答案">
  <!-- 可以把问题ID存在按钮的data属性里，方便后续获取 -->
  <button id="validateBtn" data-question-id="capital-of-france">验证答案</button>
  <!-- 用来显示结果的元素 -->
  <span id="result"></span>
</div>

<script>
// 获取页面元素
const validateBtn = document.getElementById('validateBtn');
const answerInput = document.getElementById('answerInput');
const resultSpan = document.getElementById('result');

// 给按钮加点击事件
validateBtn.addEventListener('click', async () => {
  const userAnswer = answerInput.value;
  // 如果用户没输入，直接返回，不发请求
  if (!userAnswer.trim()) {
    resultSpan.textContent = "请输入答案哦";
    resultSpan.style.color = "#999";
    return;
  }

  try {
    // 发送POST请求到服务端的接口
    const response = await fetch('/check-answer', {
      method: 'POST',
      // 告诉服务端我们发的是JSON格式
      headers: {
        'Content-Type': 'application/json'
      },
      // 把要传的数据转成JSON字符串
      body: JSON.stringify({
        questionId: validateBtn.dataset.questionId,
        userAnswer: userAnswer
      })
    });

    // 解析服务端返回的JSON数据
    const data = await response.json();
    // 根据结果更新页面显示
    if (data.isCorrect) {
      resultSpan.textContent = "✅";
      resultSpan.style.color = "green";
    } else {
      resultSpan.textContent = "❌";
      resultSpan.style.color = "red";
    }
  } catch (error) {
    // 处理请求失败的情况
    console.error('请求出错了:', error);
    resultSpan.textContent = "⚠️ 请求失败，请稍后再试";
    resultSpan.style.color = "orange";
  }
});
</script>

额外说明：如果不想用async/await怎么办？ #

要是你暂时对async/await有点懵，也可以用传统的.then()链式调用写法，效果是一样的：

validateBtn.addEventListener('click', () => {
  const userAnswer = answerInput.value;
  if (!userAnswer.trim()) {
    resultSpan.textContent = "请输入答案哦";
    resultSpan.style.color = "#999";
    return;
  }

  fetch('/check-answer', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      questionId: validateBtn.dataset.questionId,
      userAnswer: userAnswer
    })
  })
  .then(response => response.json())
  .then(data => {
    if (data.isCorrect) {
      resultSpan.textContent = "✅";
      resultSpan.style.color = "green";
    } else {
      resultSpan.textContent = "❌";
      resultSpan.style.color = "red";
    }
  })
  .catch(error => {
    console.error('请求出错了:', error);
    resultSpan.textContent = "⚠️ 请求失败，请稍后再试";
    resultSpan.style.color = "orange";
  });
});

其实你提到的Ajax就是这类“无刷新请求”的统称，而Fetch是现代浏览器替代老的XMLHttpRequest（传统Ajax）的API，比之前的写法简单太多了。Promise是Fetch背后的核心概念，但你现在不用深入理解，先照着示例写，用多了自然就懂了。

先把这个最小示例跑通，再慢慢扩展到你自己的项目里就好啦！

备注：内容来源于stack exchange，提问作者Travis Schau