Fastify从PostgreSQL查数据时EJS渲染及AJAX交互异常问题

问题现象 #

• 前端AJAX请求报错「Error: undefined」
• login.ejs中的循环代码无内容输出
• 服务器端能正常打印查询结果和license_key，但reply.view无法将数据传递到EJS模板

核心原因 #

1. AJAX与后端响应格式不匹配：前端AJAX设置了dataType: "JSON"，期望接收JSON数据，但后端用reply.view返回的是HTML页面，导致JSON解析失败，进入fail回调后response.msg不存在，报错undefined。
2. 页面渲染逻辑错误：后端通过POST请求返回新的HTML页面，但AJAX请求不会自动刷新当前页面，原页面的license_users变量未被更新，因此循环无内容。

解决方案：改用JSON返回数据，前端动态渲染DOM #

1. 修改服务器端代码（返回JSON而非页面） #

fastify.post("/license", async (request, reply) => {
  const client = await fastify.pg.connect();
  const { license_key } = request.body;
  try {
    const result = await client.query(
      'SELECT * FROM license WHERE license_key LIKE $1',
      [license_key]
    );
    // 返回JSON格式的查询结果
    return reply.send({ 
      msg: '查询成功',
      license_users: result.rows 
    });
    console.log(result.rows)
    console.log(license_key)
  } catch (err) {
    console.error(err);
    // 错误时也返回JSON格式的信息
    return reply.send({ msg: '查询失败', error: err.message });
  } finally {
    client.release();
  }
});

2. 修改前端AJAX代码（动态渲染查询结果） #

$("#addUser_license").blur(function() {
  let myTxt = $(this).val();
  var formData = {
      "license_key": myTxt,
  };
  $.ajax({
          type: "POST",
          dataType: "JSON",
          url: "/license",
          data: formData,
      })
      .done(function(response) {
          console.log("Success: " + response.msg);
          console.log(response.license_users);
          // 获取列表容器并清空原有内容
          const userList = $("#license-user-list");
          userList.empty();
          // 循环生成列表项并插入
          response.license_users.forEach(user2 => {
              const li = $("<li>").text(user2.license_key);
              li.append(`<script>console.log("${user2.license_key}");</script>`);
              userList.append(li);
          });
      })
      .fail(function(xhr) {
          // 正确获取错误信息
          const errorMsg = xhr.responseJSON?.msg || "未知错误";
          console.log("Error: " + errorMsg);
          console.log(myTxt);
          console.log(formData);
      });
});

3. 修改login.ejs代码（预留动态渲染容器） #

<input type="text" name="addUser_license" id="addUser_license" />

<!-- Display the search results -->

<ul id="license-user-list">
  <!-- 内容由JavaScript动态生成 -->
</ul>

说明 #

• 服务器端不再返回完整页面，而是仅返回查询数据，符合AJAX的无刷新交互逻辑。
• 前端通过JavaScript动态生成DOM元素，实现查询结果的实时展示。
• 错误处理部分优化了错误信息的获取方式，避免出现undefined报错。

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