使用Express时，如何将API响应数据填充到HTML元素（非EJS方案）

方案一：服务器端替换HTML占位符 #

核心思路是在result.html里提前设置占位符（比如{{movieTitle}}），服务器获取OMDb数据后，读取result.html内容并替换占位符，再返回给客户端。

实现步骤： #

1. 在result.html中添加对应占位符：

<div class="movie-info">
  <h2>{{title}}</h2>
  <p>年份：{{year}}</p>
  <p>IMDb评分：{{imdbRating}}</p>
</div>

2. 修改app.js中的/query路由：

const fs = require('fs');
const path = require('path');

app.get('/query', async (req, res) => {
  // 假设已通过你现有逻辑从OMDb获取到数据，存于movieData变量
  const movieData = await fetchOMDbData(req.query.id);
  
  // 读取result.html文件
  fs.readFile(path.join(__dirname, 'result.html'), 'utf8', (err, html) => {
    if (err) return res.status(500).send('读取页面失败');
    
    // 批量替换占位符
    const renderedHtml = html
      .replace('{{title}}', movieData.Title)
      .replace('{{year}}', movieData.Year)
      .replace('{{imdbRating}}', movieData.imdbRating);
    
    // 返回处理后的HTML页面
    res.send(renderedHtml);
  });
});

方案二：客户端AJAX请求+动态渲染 #

核心思路是点击电影卡片时，前端发起AJAX请求获取OMDb数据，再通过JavaScript动态填充到result.html的对应元素中。

实现步骤： #

1. 修改app.html中的电影卡片点击逻辑：

// 假设电影卡片带有data-movie-id属性存储电影ID
document.querySelectorAll('.movie-card').forEach(card => {
  card.addEventListener('click', async () => {
    const movieId = card.dataset.movieId;
    // 发起AJAX请求获取数据
    const res = await fetch(`/query?id=${movieId}`);
    const movieData = await res.json();
    
    // 用localStorage暂存数据，跳转后读取
    localStorage.setItem('movieData', JSON.stringify(movieData));
    window.location.href = '/result.html';
  });
});

2. 在result.html中添加数据填充脚本：

<script>
  window.onload = () => {
    const movieData = JSON.parse(localStorage.getItem('movieData'));
    if (movieData) {
      document.querySelector('.movie-title').textContent = movieData.Title;
      document.querySelector('.movie-year').textContent = movieData.Year;
      document.querySelector('.movie-rating').textContent = movieData.imdbRating;
      // 清除暂存数据避免残留
      localStorage.removeItem('movieData');
    }
  };
</script>

3. 修改app.js的/query路由返回JSON数据，并托管静态文件：

app.use(express.static(__dirname)); // 托管静态文件，让客户端能访问result.html

app.get('/query', async (req, res) => {
  const movieData = await fetchOMDbData(req.query.id);
  res.json(movieData);
});

方案三：URL查询参数传递数据（适合小数据量场景） #

核心思路是服务器获取数据后，将关键信息拼接成URL查询参数，重定向到result.html，前端解析参数后填充内容。

实现步骤： #

1. 修改app.js中的/query路由：

app.get('/query', async (req, res) => {
  const movieData = await fetchOMDbData(req.query.id);
  // 拼接查询参数
  const params = new URLSearchParams({
    title: movieData.Title,
    year: movieData.Year,
    rating: movieData.imdbRating
  }).toString();
  // 重定向到带参数的result.html
  res.redirect(`/result.html?${params}`);
});

2. 在result.html中添加解析参数的脚本：

<script>
  window.onload = () => {
    const urlParams = new URLSearchParams(window.location.search);
    document.querySelector('.movie-title').textContent = urlParams.get('title');
    document.querySelector('.movie-year').textContent = urlParams.get('year');
    document.querySelector('.movie-rating').textContent = urlParams.get('rating');
  };
</script>

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