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

时间:2011-07-24 13:53:15

标签: javascript jquery json url escaping

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

所以我想生成一个类似的URL:

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

如何转义我的JSON字符串(数组序列化)以将其作为参数包含在URL中?

如果有使用JQuery的解决方案,我会喜欢它。

注意:是的,页面的参数需要在一个数组中,因为它们有很多。我想我会用bit.ly来缩短之后的链接。

6 个答案:

答案 0 :(得分:199)

encodeURIComponent(JSON.stringify(object_to_be_serialised))

答案 1 :(得分:18)

您可以使用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
    }
});

答案 2 :(得分:18)

我当时也想做同样的事情。对我来说问题是我的网址太长了。我今天使用Bruno Jouhier's jsUrl.js library找到了解决方案。

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

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

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

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

注意:测试后,看起来jsurl.js库使用ECMAScript 5函数,如Object.keys,Array.map和Array.filter。因此,它只适用于现代浏览器(不包括8及以下)。但是,这些功能的polyfill会使它与更多浏览器兼容。

答案 3 :(得分:8)

使用encodeURIComponent()

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

答案 4 :(得分:4)

我会提供一个古怪的选择。有时候使用不同的编码会更容易,特别是如果你正在处理各种系统,而这些系统并不是以同样的方式处理URL编码的细节。这不是最主流的方法,但在某些情况下可以派上用场。

您可以对数据进行基数编码,而不是对数据进行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编码数据时遇到问题,通常是由于引号,嵌入式%符号等。 Base64非常中性,因为它不使用特殊字符。

答案 5 :(得分:0)

德兰给出的答案是完美的。只是添加它 - 有人想要命名参数或分别传递多个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')));

希望这有帮助!