如何在 URL 参数中提交哈希键？答案

【问题标题】：How can I submit a hash key in an URL parameter?如何在 URL 参数中提交哈希键？
【发布时间】：2011-07-08 16:42:59
【问题描述】：

我有一个使用 Freemarker 作为视图组件的 Spring-MVC 应用程序。

在我的模板中，生成了几个指向我的应用程序的链接，其中包括包含哈希键 (#) 的 URL 参数。

例子：

参数：Q#106368 11

Freemarker 使用编码参数生成的 URL：testurl.html?key=Q%23106368%2011

我使用 JavaScript 重定向到这个 URL（原因：我使用 JS 来管理同时加载 2 个帧）。

重定向方法很简单：

    function redir(url) {
        window.location.href = url;
    }

Freemarker 生成的 JS 调用看起来像

<a href="javascript:redir('http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011');">test</a>

我的问题是浏览器/Javascript 转换回 URL 编码参数，认为有一个 # 并在那里切断。

当我直接使用window.location.href='http://...' 时，它可以工作。仅当使用方法参数时，它似乎被神奇地 URL 解码，然后重定向失败，因为 URL 在 # 处被截断。

有没有简单的方法可以正确传递参数？

我知道我可以替换 #，例如在模板中使用$$$hash$$$，然后再次在服务器端进行替换。但是有很多地方我需要改变......

【问题讨论】：

【解决方案1】：

正如 Marc B 所说，有必要再次进行 URL 编码。该方法将是encodeURI()。但是，此方法不编码 # 符号。对于我的具体用例，我必须在编码后将# 符号替换为%23。

redirect JS 方法最后长这样：

    function redir(url) {
        url = encodeURI(url);
        url = url.replace(/#/g, '%23');
        window.location.href = url;
    }

【讨论】：

刚刚有这个。正如下一个答案所建议的那样，只需使用encodeURIComponent，它比手动替换更彻底和正确。它还对 encodeURI 没有的其他内容进行编码 - 将 encodeURI("google.com/pg/#home?param=$#$&*(@=") 与 encodeURIComponent("google.com/pg/#home?param=$#$&*(@=") 进行比较，看看区别。

【解决方案2】：

encodeURIComponent/decodeURIComponent 比仅 encodeURI 更彻底，它会解码/编码 '#' 和事件 '/'

【讨论】：

【解决方案3】：

你用的是什么浏览器？我正在尝试 FireFox 5，但在我的测试中它不会将 %23 转换回 #。当您将鼠标悬停在链接上或复制链接位置时，它有什么？您确定输出链接的任何内容都没有进行转换吗？

更新

这并不理想，但似乎解决了问题：

<a onclick="url = 'http://localhost:8080/testappp/testurl.html?key=Q%23106368%2011';" href="javascript:redir(url);">test</a>

href 属性似乎已被解码。当我将鼠标悬停在它上面时，我看到的是 # 而不是 %23。

【讨论】：

同意。任何确实将此转义转换回的浏览器都将是一个严重的废话。
即复制链接位置或直接从代码中检查。
感谢您的回复。我仔细看了看，我忘了提到一个非常重要的细节，但我从没想过会这样。我使用 Javascript 重定向方法，当我使用此方法时会发生这种情况。当我将 URL 复制并粘贴到浏览器中时，它工作正常。所以这不是 Java/Spring/浏览器问题，而是 Javascript 问题。我已经相应地更新了问题。
请记住，转义/编码仅在浏览器中持续一次。如果是双程，那么每个阶段都需要重新编码。
@Marc B - 如果我在 JS 方法中只有完整的 URL 字符串，我将如何进行正确的重新编码。只需添加 url = encodeURI(url);对我不起作用。