Express+Node.js项目前后端无法连通，下拉选分类后商品不刷新

问题根因 #

你通过fetch发起请求后，仅在控制台打印了请求成功的日志，没有对后端返回的渲染后页面内容做任何插入当前页面的处理，所以界面不会发生任何变化。

解决思路（两种方案二选一即可） #

方案1：最简实现，无需AJAX，直接跳转页面

你当前的后端接口本身就是返回完整的渲染页面，完全不需要用fetch做异步请求，直接修改getItems函数跳转地址即可：

function getItems() {
    const select = document.getElementById('category');
    let option = select.options[select.selectedIndex];
    let categoryId = option.value;
    // 直接跳转到对应分类页面，后端渲染后直接展示新页面
    window.location.href = `/items/${categoryId}`;
}

这种方案不用修改任何后端和模板代码，改完直接生效。 #

方案2：保留异步请求，局部刷新页面内容

如果不想跳转页面，需要做两处修改：

1. 首先给Handlebar模板中存放商品列表的行容器增加唯一ID，方便后续替换内容：

<!-- 把原来的<div class="row">改成下面的，增加id属性 -->
<div class="row" id="item-container">
{{#each editedItems as |i|}}
<!-- 原有商品卡片代码保持不变 -->
{{/each}}
</div>

2. 修改前端searchByCategory函数，拿到后端返回的HTML后，提取对应内容替换到当前页面：

const searchByCategory = async (categoryId) => {
    const response = await fetch(`/items/${categoryId}`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });
  
    if (response.ok) {
      console.log("Response ok");
      // 拿到返回的完整HTML文本
      const htmlText = await response.text();
      // 创建临时DOM对象解析返回的HTML
      const tempDom = new DOMParser().parseFromString(htmlText, 'text/html');
      // 提取返回页面里的商品列表内容
      const newItemList = tempDom.getElementById('item-container').innerHTML;
      // 替换当前页面的商品列表
      document.getElementById('item-container').innerHTML = newItemList;
    } else {
      console.log("Error");
    }
};

可选优化 #

如果确定用异步局部刷新的话，后端可以不用返回完整页面，直接返回editedItems的JSON数据，前端拿到后用Handlebars的前端模板渲染列表，性能会更好，也能减少不必要的HTML内容传输。

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