点击浏览器回退按钮时如何更新Ajax加载的HTML内容？

问题根源：你调用history.pushState只是往浏览器历史栈里新增了访问记录，但是浏览器点击回退/前进触发历史记录切换时，默认不会执行你的页面更新逻辑，需要手动监听popstate事件处理。

实现步骤 #

1. 抽取公共更新逻辑 #

把「读取URL参数→同步到表单筛选项→发起Ajax请求更新页面」的逻辑抽成独立公共函数，多个场景可以复用：

// 公共页面更新函数
function updatePageByUrlParams() {
  // 读取当前URL的参数
  const urlParams = new URLSearchParams(window.location.search);
  const q = urlParams.get('q') || '';
  const srchType = urlParams.get('srchType') || '';
  const sortBy = urlParams.get('sortBy') || '';

  // 把参数同步回表单控件，避免筛选项显示和URL不一致
  $('#form input[name=q]').val(q);
  $('#filter input[name=srchtype]').prop('checked', false).filter(`[value="${srchType}"]`).prop('checked', true);
  $('#filter select#sortBy').val(sortBy);

  // 发起Ajax请求更新数据
  const parameters = `q=${encodeURIComponent(q)}&srchType=${encodeURIComponent(srchType)}&sortBy=${encodeURIComponent(sortBy)}`;
  $.ajax({
    type: "POST",
    url: url,
    data: parameters + "&_token=" + _token
  }).done(data => {
    // 原有渲染数据的逻辑
  });
}

2. 监听历史切换事件 #

监听popstate事件，用户点击回退/前进按钮时触发页面更新：

window.addEventListener('popstate', () => {
  updatePageByUrlParams();
});

3. 页面首次加载时调用函数 #

处理用户直接带筛选参数访问页面的场景，保证打开就加载对应数据：

$(document).ready(() => {
  updatePageByUrlParams();
});

原有代码优化建议 #

你原有筛选修改的逻辑里存在变量名错误：定义的查询关键词变量是q，拼接参数时用了不存在的qVal，另外参数拼接推荐用URLSearchParams自动处理编码，避免特殊字符出错：

// 筛选值修改后的逻辑替换为以下代码
const q = $('#form input[name=q]').val(),
srchtype= $('#filter input[name=srchtype]:checked').val(),
sortBy  = $('#filter select#sortBy').val();
// 自动处理参数编码，不会出现特殊字符导致的参数错误
const parameters = new URLSearchParams({
  q,
  srchType: srchtype,
  sortBy
}).toString();
history.pushState(null, null, '?' + parameters);
// 直接调用公共函数更新页面，不用重复写请求逻辑
updatePageByUrlParams();

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