JavaScript/jQuery实现Ajax成功后刷新URL并完整保留查询参数

推荐实现代码 #

Ajax请求成功后，直接调用以下任意一种方案，即可保证刷新后URL完整保留?product_cat=mobile这类查询参数：

• 优先使用原生刷新方法
  直接执行location.reload()，默认会保留当前URL的所有部分（路径、查询参数、哈希值）。如果需要强制跳过浏览器缓存拉取最新资源，可以传入参数：location.reload(true)。
• 手动指定完整URL跳转（适合存在重定向异常的场景）

  // 取当前完整URL后触发跳转刷新
  window.location.assign(window.location.href)
  

• 替换式刷新（不需要保留原页面历史记录时使用）

  // 传入完整URL，不要单独传路径名
  window.location.replace(window.location.href)
  

原有测试方案的问题分析 #

你之前测试时出现参数丢失，和使用的方法设计直接相关：

• location.reload()、history.go(0)、location.href = location.href这三个方法本身的设计就是保留完整URL的所有部分，正常情况下不会丢失查询参数。如果这三个方法执行后也出现参数丢失，说明当前页面存在全局路由守卫、服务端重定向规则，把带查询参数的地址重定向到了不带参数的版本，可以优先排查相关重定向逻辑。
• location.href = location.pathname、location.replace(location.pathname)这两个方法，本身就只取了域名后的路径部分，主动丢弃了?开头的查询串，执行后必然会跳转到不带参数的地址，是参数丢失的直接诱因。

注意：所有刷新跳转逻辑中，只要传入的是window.location.href这个完整地址，就不会丢失查询参数，绝对不要单独传pathname、host这类不含查询串的URL属性做跳转。

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