核心方法：URL查询字符串（Query String）
在跳转目标的URL末尾附加?key=value格式的参数，多个参数用&连接：
<!-- 示例：传递name和id参数 --> <a href="profile.html?name=John&id=123">跳转到个人主页</a>
- 参数结构：
目标页面?参数1=值1&参数2=值2 - 特点：参数明文显示在地址栏，长度受浏览器限制（约2000字符）。
三种跳转方式实现
超链接跳转（<a>
<a href="product.html?category=books&sort=price">查看图书</a>
表单跳转（Form Submit）
通过method="get"将输入框值附加到URL：
<form action="search.html" method="get"> <input type="text" name="keyword" placeholder="输入关键词"> <button type="submit">搜索</button> </form>
提交后跳转至：search.html?keyword=用户输入内容
JavaScript跳转
动态拼接参数并跳转：
// 通过location.href跳转
const userId = 456;
location.href = `dashboard.html?user=${userId}`;
// 或使用window.open()
window.open(`report.html?date=2025-10-01`, '_blank');
参数获取方式
前端JavaScript获取：
// 解析当前页面的URL参数
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name'); // 返回"John"（示例）
const id = urlParams.get('id'); // 返回"123"
后端获取示例（PHP）：
<?php $name = $_GET['name']; // 获取name参数 $id = $_GET['id']; // 获取id参数 ?>
关键注意事项
-
URL编码
特殊字符（如空格、中文）需用encodeURIComponent()处理：const city = "北京"; const safeParam = encodeURIComponent(city); // 输出"%E5%8C%97%E4%BA%AC" location.href = `city.html?name=${safeParam}`;解码使用`decodeURIComponent()。
-
安全性风险
- 敏感数据禁止传递：密码、令牌等不应通过URL传输（易被浏览器历史记录泄露）。
- 防XSS攻击：对用户输入的参数值进行过滤,避免注入恶意脚本。
-
长度限制
超过浏览器URL长度限制（约2000字符）会导致参数截断，此时需改用POST或本地存储。 -
数据类型限制
URL参数只能是字符串,复杂数据需用JSON序列化：const data = { role: "admin", level: 5 }; const jsonStr = encodeURIComponent(JSON.stringify(data)); location.href = `admin.html?data=${jsonStr}`;
替代方案
-
POST请求：通过表单
method="post"提交参数（数据不暴露在URL）。 -
Web存储：用
localStorage或sessionStorage在页面间传递数据：
// 页面A存储数据 localStorage.setItem("theme", "dark"); // 页面B读取数据 const theme = localStorage.getItem("theme"); -
路由参数：Vue/React等框架可通过路由动态片段传递（如
/user/:id）。
最佳实践建议
- 必要场景使用：仅传递非敏感、轻量级数据（如页面标识、排序方式）。
- 服务端验证：后端务必校验参数合法性,防止篡改。
- 用户体验：保持URL简洁可读,便于用户分享或收藏。
引用说明参考MDN Web文档关于URLSearchParams的规范及W3C对URL编码的标准定义,遵循安全开发实践。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/25648.html
