javascript 重定向时，直接将邮箱地址拼入 url 会导致解析失败，因为 `@`、`.` 等字符在 url 中具有特殊含义；必须使用 `encodeuricomponent()` 对参数进行编码，才能确保 url 合法且服务端可正确解析。
在前端通过 JavaScript 实现页面跳转并携带邮箱等含特殊符号的参数时，不能直接字符串拼接。URL 规范（RFC 3986）明确规定：@、.、/、?、=、& 等字符在查询参数中需进行百分号编码（percent-encoding），否则浏览器会将其误判为 URL 结构的一部分（如 @ 可能被解析为认证信息分隔符），导致重定向失败、400 错误或参数截断。
✅ 正确做法是：对每个动态参数值单独调用 encodeURIComponent()，而非对整个 URL 编码。
以下是修复后的完整示例代码：
<form onsubmit="event.preventDefault(); redirect();">
<input type="email" id="mail" placeholder="YOUR EMAIL ADDRESS" required />
<input type="submit" value="SEND US THE LIST" />
</form>
<script>
function redirect() {
const email = document.getElementById("mail").value.trim();
if (!email) return;
// ✅ 关键：对 email 参数值进行 URI 编码
const encodedEmail = encodeURIComponent(email);
const url = `https://rinateithan.com/thank-you?sender=${encodedEmail}`;
console.log("Redirecting to:", url); // 调试输出（含编码后结果）
window.location.replace(url);
}
</script>⚠️ 注意事项：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“Java免费学习笔记（深入）”；
- 不要对整个 URL 调用 encodeURIComponent —— 这会错误编码 :、/、? 等协议必需字符，导致请求无法到达目标服务器；
- 仅编码参数值（如 email），保留 URL 结构字符原样；
- 若存在多个参数（如 ?sender=...&source=...），需对每个值分别编码：
const url = `https://example.com?sender=${encodeURIComponent(email)}&source=${encodeURIComponent('newsletter')}`; - 服务端接收时，大多数框架（如 Express、PHP、Django）会自动解码查询参数，无需额外处理；
- 建议添加 .trim() 和基础校验，避免空格或空值引发异常。
? 小贴士：encodeURI() 适用于完整 URL 编码（保留 /, ?, : 等），但不适用于单个参数；而 encodeURIComponent() 是专为查询参数设计的，它会编码 @, ., /, ?, =, & 等所有非 URI 保留字符，因此是本场景的唯一推荐方案。
遵循此规范，即可安全、可靠地在重定向中传递任意格式的邮箱地址。
