encodeURI(JSON.stringify()) 在 URL 中显示 %255B答案

【问题标题】：encodeURI(JSON.stringify()) showing %255B in URLencodeURI(JSON.stringify()) 在 URL 中显示 %255B
【发布时间】：2019-09-19 14:12:03
【问题描述】：

我试图在 Angular 中传递一个 queryParam，它由一组对象组成，例如 fooArray = [{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]。在 URL queryParam 中，我收到以下信息： %255B when using encodeURI(JSON.stringify(this.fooArray))

我尝试使用 encodeURI(JSON.stringify()) 将数组编码为 queryParam 和 JSON.parse(decodeURIComponent()) 来检索参数

fooArray = [{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]

fooParam: encodeURI(JSON.stringify(this.fooArray))

JSON.parse(decodeURIComponent(params["fooParam"]))

【问题讨论】：

请注意，您的第二个键 (foo: false) 会覆盖第一个 (foo: 'bar')
encodeURI(JSON.stringify([{foo: 'bar', foo: false}, {foo: 'bar', foo: false}])) 给了我"%5B%7B%22foo%22:false%7D,%7B%22foo%22:false%7D%5D" (Chrome)。在我看来，您正在对它进行双重编码，因为如果您再次传递它，% 将（正确）编码为%25。
您能再添加一点上下文吗？例如。你在哪里使用你的查询参数？在router.navigate?如果是这样，你不需要编码任何东西，因为 Angular 正在为你做这些。

标签： javascript urlencode query-parameters encodeuricomponent

【解决方案1】：

您正在对 URL 进行双重编码。这个：

encodeURI(JSON.stringify([{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]))

结果

"%5B%7B%22foo%22:false%7D,%7B%22foo%22:false%7D%5D"

如果你再次调用encodeURI，你会得到

"%255B%257B%2522foo%2522:false%257D,%257B%2522foo%2522:false%257D%255D"

...因为% 被编码为%25。

两个音符：

您应该只对其编码一次。也许您正在将字符串传递给已经为您进行 URI 编码的东西？如果是这样，请不要使用encodeURI。
通常，您需要encodeURIComponent，而不是encodeURI（因为通常您只编码hte URI 的一个组成部分，而不是整个内容）。

【讨论】：