使用 & 对 URL 组件进行编码答案

【问题标题】：Encoding URL components with an ampersand &使用 & 对 URL 组件进行编码
【发布时间】：2010-07-02 15:43:36
【问题描述】：

这里似乎是一个非常简单的问题：

我有一个程序，其中有人在表单中输入字符串M&S 并运行查询。我了解& 是保留字符，因此必须进行编码。问题是在某些情况下似乎需要编码两次。

如果 URL 用于 javascript onClick 事件，正常的 URL 编码似乎可以正常工作（此处操作员可以单击列标题进行排序）：

<td onClick="AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=161')">

但是，如果在锚点中使用了URL（虽然锚点实际上使用了AJAX），似乎需要编码两次：

<a href="javascript:AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')" title='Refresh'>Refresh</a>

上面的两个例子都可以正常工作。然而，它们是手工生成的测试用例。不幸的是，在应用程序中，当我实际生成 URL 时，我不知道它会被如何使用。

如果我对 URL 参数编码一次 (M%26S)，它在 onClick 中可以正常工作。但是在锚点中使用这种方式，服务器将 URL 视为...Qry147=M&S&sortmethod1=147... - 因此在返回给服务器之前它必须是未编码的。

如果我对它进行两次编码 (M%2526S)，则锚可以工作，但对于 onClick，服务器会看到 ...Qry147=M%2526S...。

我觉得我在这里遗漏了一些东西。有没有办法让这两种情况下的工作相同？

【问题讨论】：

你能举例说明你是如何实际使用这个值的吗？
抱歉，问题没有完全正确显示。猜猜我需要努力逃离我的cmets！稍等一下，我会尝试编辑它。
查看源代码... 谈不上主动！ :) 问题现在显示正确，对此表示歉意。

标签： javascript html url encoding

【解决方案1】：

如果您使用简单的步骤构建整个 HTML 文本，一些困难就会消失。因此，以您的示例为例，您希望对以下查询参数进行编码：

M&S

当您将此字符串作为查询参数嵌入到 URL 中时，您必须对其进行 urlencode，正如您已经知道的那样。 urlencoded 字符串是M%26S。完整的 URL 如下所示：

http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=147

现在这个 URL 嵌入在 JavaScript 代码中，在这种情况下，你只需要在两端加上单引号：

'http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=147'

整个 JavaScript 代码如下所示：

AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')

现在整个文本在被解释为 URL 的 HTML 上下文中使用，因此您需要再次对其进行 urlencode：

AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')

最后，由于您将此文本嵌入到 HTML 中，您需要对其进行 htmlescape：

AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&amp;sortmethod1=147')

这就是为什么你以：

<a href="javascript:AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&amp;sortmethod1=147')" title='Refresh'>Refresh</a>

我通常通过不将字符串 M&S 直接放入 onclick 事件或锚点来避免这些编码挑战。通常，您不能以相同的方式对 onclick 事件和锚点进行编码，因为两者的解码过程不同：

onclick: html -> js -> url
anchor: html -> url -> js -> url

但是等等......如果你写一个这样的辅助函数，它就可以工作：

function myQuery(q) {
    var encodedQ = encodeURIComponent(q); // TODO: which character encoding is used here?
    var url = 'http://10.0.0.195/program.exe?Qry147=' + encodedQ + '&sortmethod1=147';
    var response = AJAX_Get(url);
    // TODO: handle errors
}

现在你可以写了：

<a href="javascript:myQuery('M&amp;S')">anchor</a>
<a onclick="myQuery('M&amp;S')">event</a>

这个技巧奏效了，因为锚箱中不再有%。

【讨论】：

很好的描述 - 我想我明白为什么它现在不起作用了。听起来这将是一个可行的解决方案。我可能会走这条路，尽管我找到了另一个稍微有点 hacky 的解决方案。

【解决方案2】：

我建议以未编码的形式存储参数，然后在使用时进行编码，无论是在 onClick 事件中还是在锚点中。

【讨论】：

【解决方案3】：

我从其他地方得到了一些解决方案，但它运行得相当好。

简单替换：

与：

onClick 操作在锚点和其他元素上的工作方式相同。显然，任何编写了自己的 HTML 块的应用程序可能仍然存在问题，但在核心代码中进行此解决方法只是一个小改动，所以我现在使用这条路线。

编辑： 刚刚在这里发现了我的答案，并意识到这个解决方案造成的问题多于解决的问题。我最终抽出时间将其更改为正常工作（因此它在正确的时间使用正确的转义方法。

【讨论】：