本文介绍如何在页面跳转或重定向时安全、可靠地保留并修改 url 中的 get 参数，避免因手动拼接导致参数丢失，推荐使用原生 `url` 和 `urlsearchparams` api 实现健壮、可维护的参数管理。
在 Web 开发中，频繁通过链接或按钮跳转并携带原有查询参数（如 ?pg=2&type=fa&emp=105）是常见需求。但像原始代码中直接用 PHP 模板变量 =$_GET['pg']?> 拼接 URL 的方式存在严重隐患：当某些参数未在当前请求中存在时（例如用户直接访问 /dashboard.php 而无 pg），PHP 会输出空值甚至触发 Notice 错误，最终生成形如 /dashboard.php?page=page1&pg=&type=fa&emp= 的无效链接——不仅参数丢失，还可能破坏后续服务端逻辑。
更可靠的做法是在客户端动态解析、操作并重建 URL 查询字符串，利用浏览器原生支持的现代 API：
✅ 推荐方案：使用 URLSearchParams 安全重构 URL
// 示例：为双击事件构造带完整参数的新跳转链接
$('.leave_info').each(function() {
$(this).dblclick(function(e) {
e.preventDefault(); // 防止默认行为干扰
// 1. 解析当前 URL 的全部查询参数（自动解码，健壮兼容）
const params = new URLSearchParams(window.location.search);
// 2. 覆盖/新增所需参数（自动处理重复键、编码特殊字符）
params.set('page', 'page1');
params.set('type', $(this).data('type'));
params.set('pg', $(this).val());
params.set('emp', $(this).data('emp'));
// 3. 构建目标 URL（基础路径 + 新参数）
const targetUrl = new URL('/forms/leaver/dashboard.php', window.location.origin);
targetUrl.search = params.toString();
// 4. 执行跳转
window.location.href = targetUrl.href;
});
});? 关键优势说明：URLSearchParams 自动处理 URL 编码（如空格 → %20，中文 → UTF-8 编码），无需手动 encodeURIComponent()；.set() 方法会覆盖同名参数，.append() 可追加多值（如 ?tag=a&tag=b），.delete() 可移除指定键；基于 window.location.search 解析，确保始终反映当前真实参数状态，不依赖服务端模板渲染结果；兼容所有现代浏览器（Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+）。
⚠️ 注意事项与最佳实践
- 避免直接拼接字符串：手动拼接 "?a=" + val1 + "&b=" + val2 易引发 XSS（若 val 含恶意脚本）或编码错误（如 & 未转义导致参数截断）；
- 服务端仍需校验：前端构造的 URL 仅提升体验，后端必须独立验证和过滤所有 $_GET 参数，不可信任客户端输入；
- 简化同页参数更新：若仅需修改当前页的查询参数（不跳转新路径），可直接赋值 window.location.search = params.toString()，浏览器将自动刷新并保留路径；
- 兼容旧浏览器？ 如需支持 IE，可引入 url-search-params-polyfill 或封装简易解析函数。
✅ 总结
告别脆弱的手动字符串拼接，拥抱 URL + URLSearchParams 是管理 URL 参数的现代、标准且可扩展的方式。它让参数增删改查变得语义清晰、逻辑内聚，显著降低出错率，并为未来功能（如历史记录管理、参数持久化）打下坚实基础。从今天起，在任何需要动态 URL 的场景中，优先选用这一原生方案。
