Express如何实现返回数据不跳转新页面，仅渲染页面指定区域

核心是用**前端异步请求（AJAX/Fetch/Axios）**替代传统表单提交/链接跳转，只更新右侧详情区域的内容，完全不会影响左侧已渲染的搜索结果。

1. 前端核心实现 #

首先在搜索结果条目里绑定对应文档的id，推荐用自定义属性data-doc-id存储：

<!-- 左侧搜索结果列表示例 -->
<div class="left-search-result">
  <!-- 每个搜索条目绑定对应文档id -->
  <div class="result-item" data-doc-id="xxx123">搜索结果1</div>
  <div class="result-item" data-doc-id="xxx456">搜索结果2</div>
</div>
<!-- 右侧详情容器 -->
<div class="right-detail-container" id="detailWrap">请点击左侧条目查看详情</div>

给所有搜索结果条目绑定点击事件，发起异步请求获取数据后仅更新右侧容器：

// 原生JS实现，用jQuery/Axios逻辑一致
document.querySelectorAll('.result-item').forEach(item => {
  item.addEventListener('click', async function() {
    // 读取当前条目绑定的文档id
    const docId = this.dataset.docId;
    try {
      // 发起异步GET请求，不会触发整页跳转
      const res = await fetch(`/api/getDetail/${docId}`);
      const detailData = await res.json();
      // 仅更新右侧详情区域的内容
      document.getElementById('detailWrap').innerHTML = `
        <h3>${detailData.title}</h3>
        <p>${detailData.content}</p>
        <!-- 其他需要展示的详情字段自行扩展 -->
      `;
    } catch (err) {
      document.getElementById('detailWrap').textContent = '加载详情失败，请重试';
    }
  })
})

2. Express后端接口实现 #

新增专门返回详情数据的接口，直接返回JSON格式数据即可，不要调用render渲染整页模板：

// 引入你存储详情的Mongo集合模型，示例命名为DetailModel
const DetailModel = require('./models/detail');

// 详情查询接口
app.get('/api/getDetail/:id', async (req, res) => {
  try {
    const docId = req.params.id;
    // 查询Mongo对应集合的文档数据
    const detail = await DetailModel.findById(docId);
    // 直接返回JSON数据给前端
    res.json(detail);
  } catch (err) {
    res.status(500).json({msg: '查询失败', error: err});
  }
})

注意事项 #

• 不要用<a href="/detail/xxx">这种跳转链接，也不要用传统form提交，否则必然触发整页刷新
• 如果需要支持详情页的前进后退，可以配合浏览器的History API修改地址栏url，不会触发刷新，还能支持直接访问详情链接时同时加载左侧搜索列表和右侧详情
• 可以给当前选中的搜索条目加个高亮样式，提升用户体验

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