Node.js中如何在服务端处理搜索表单提交并返回带查询结果的同页面

你当前使用的res.sendFile只能返回固定的静态HTML文件，无法动态插入API返回的查询结果，所以需要引入服务端模板引擎实现动态内容渲染，全程不需要在客户端写额外逻辑，以下是具体实现步骤：

1. 安装依赖 #

我们以轻量易上手的EJS模板引擎为例，先安装依赖包：

npm install ejs

2. 调整项目结构 #

把原本的静态index.html重命名为index.ejs，放到项目根目录下新建的views文件夹中，结构参考：

你的项目目录
├── app.js
├── views
│   └── index.ejs
└── 其他项目文件

3. 配置Express模板引擎 #

在你的服务端入口文件（比如app.js）中新增模板引擎和表单参数解析配置：

const express = require('express');
const path = require('path');
const request = require('request');
const app = express();

// 解析表单POST提交的参数
app.use(express.urlencoded({ extended: true }));
// 配置EJS模板引擎
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

4. 修改模板文件index.ejs #

在原有表单下方新增结果表格的动态渲染逻辑，没有查询结果时表格默认不显示：

<form method="POST" action="http://localhost:3000/">
    <input type="text" name="address">
    <button type="submit">Search</button>
</form>

<!-- 新增查询结果表格 -->
<% if(locals.records) { %>
<table border="1">
  <thead>
    <tr>
      <th>字段1</th>
      <th>字段2</th>
      <!-- 替换成你API返回的实际字段名 -->
    </tr>
  </thead>
  <tbody>
    <% records.forEach(item => { %>
    <tr>
      <td><%= item.field1 %></td>
      <td><%= item.field2 %></td>
      <!-- 替换成你API返回的实际字段名 -->
    </tr>
    <% }) %>
  </tbody>
</table>
<% } %>

<!-- 可选：错误提示 -->
<% if(locals.error) { %>
<p style="color:red"><%= error %></p>
<% } %>

5. 修改服务端路由逻辑 #

拿到API返回结果后，将结果注入模板渲染为完整HTML返回即可：

app.get('/', function(req, res){
  // 首次访问没有查询结果，直接渲染模板
  res.render('index');
});

app.post('/', function(req, res) {
  let ENDPOINT = process.env.ENDPOINT;
  const params = {
    address: req.body.address,
    key: process.env.API_KEY,
  }
  ENDPOINT = ENDPOINT.concat((new URLSearchParams(params)).toString());

  request(ENDPOINT, function (error, response, body) {
    if (!error && response.statusCode == 200) {
      // 如果API返回的是JSON格式，先做解析
      const records = JSON.parse(body);
      // 把查询结果传给模板渲染
      res.render('index', { records: records });
    } else {
      // 错误场景处理，传递错误提示给模板
      res.render('index', { error: '查询失败，请重试' });
    }
  });
});

补充说明 #

如果你不想用EJS，也可以替换为Pug、Handlebars等其他服务端模板引擎，核心逻辑一致：服务端拿到API返回结果后，将数据注入模板拼接为完整HTML返回给浏览器，全程不需要客户端做额外逻辑处理。

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