上一篇
HTML跳转如何传递参数
在HTML跳转中传递参数，通常通过URL查询字符串实现：在目标链接后添加
?符号，并以
key=value格式拼接参数，多个参数用
&连接，
跳转，目标页面通过JavaScript解析URL获取参数值。
核心方法：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编码的标准定义,遵循安全开发实践。
