如何转义 JSON 字符串以将其包含在 URL 中？

Question

我想使用 Javascript 生成一个页面链接。页面的参数位于我以 JSON 序列化的 Javascript 数组中。

所以我想生成这样的 URL：

http://example.com/?data="MY_JSON_ARRAY_HERE"

我需要如何转义 JSON 字符串（数组序列化）以将其作为参数包含在 URL 中？

如果有使用 JQuery 的解决方案，我会爱它。

注意：是的，页面的参数需要位于数组中，因为参数很多。我想之后我会使用 bit.ly 来缩短链接。

Answer 1

encodeURIComponent(JSON.stringify(object_to_be_serialised))

Answer 2

我想做同样的事情。对我来说问题是我的网址太长了。我今天使用 Bruno Jouhier 的 jsUrl.js 库找到了一个解决方案。

我还没有非常彻底地测试过它。但是，这里是一个示例，显示使用 3 种不同方法对同一大对象进行编码后字符串输出的字符长度：

• 使用 jQuery.param
• 2651 个字符使用 JSON.stringify +encodeURIComponent 1691 个字符code>
• 821 个字符，使用 JSURL.stringify

显然 JSURL 具有对 js 对象进行 urlEncoding 的最优化格式。

https://groups.google.com/forum/? 的帖子？ fromgroups=#!topic/nodejs/ivdZuGCF86Q
显示编码和解析的基准。

注意：经过测试，jsurl.js 库似乎使用了 ECMAScript 5 函数，例如 Object.keys、Array.map 和 Array.filter。因此，它仅适用于现代浏览器（不支持 ie 8 及以下浏览器）。然而，这些功能的填充可以使其与更多浏览器兼容。

• 对于数组： https://stackoverflow.com/a/2790686/467286
• 对于 object.keys：https://stackoverflow.com/a/3937321/467286

Answer 3

您可以使用 encodeURIComponent 安全地 URL对查询字符串的部分进行编码：

var array = JSON.stringify([ 'foo', 'bar' ]);
var url = 'http://example.com/?data=' + encodeURIComponent(array);

或者如果您将其作为 AJAX 请求发送：

var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});

Answer 4

我会提供一个替代方案。有时，使用完全不同的编码会更容易，特别是当您处理的各种系统并不都以相同的方式处理 URL 编码的详细信息时。

您可以对数据进行 Base64 编码，而不是对数据进行 URL 编码。这样做的好处是编码数据非常通用，仅包含字母字符，有时尾随 =。示例：

JSON 字符串数组：

["option", "Fred's dog", "Bill & Trudy", "param=3"]

该数据，URL 编码为 data 参数：

"data=%5B%27option%27%2C+%22Fred%27s+dog%22%2C+%27Bill+%26+Trudy%27%2C+%27param%3D3%27%5D"

相同，base64 编码：

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

base64 方法可能会更短一些，但更重要的是它更简单。我在 cURL、Web 浏览器和其他客户端之间移动 URL 编码数据时经常遇到问题，通常是由于引号、嵌入 % 符号、通配符的 shell 扩展等原因造成的。 Base64 非常中性并且非常便携，因为它的输出中没有特殊字符。

许多系统都使用这种方法。例如，在 Kubernetes 生态系统中，kubectl edit Secret 表示 Base64 中的所有机密，以避免编码问题并使不可打印的二进制数据轻松复制和粘贴。

Answer 5

使用encodeURIComponent()：

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),

Answer 6

德兰给出的答案是完美的。只需添加它 - 如果有人想要命名参数或单独传递多个 JSON 字符串 - 下面的代码可能会有所帮助！

JQuery

var valuesToPass = new Array(encodeURIComponent(VALUE_1), encodeURIComponent(VALUE_2), encodeURIComponent(VALUE_3), encodeURIComponent(VALUE_4));

data = {elements:JSON.stringify(valuesToPass)}

PHP

json_decode(urldecode($_POST('elements')));

希望这有帮助！