优雅地通过 URL 传递复杂数据答案

【问题标题】：Passing complex data over URL with grace优雅地通过 URL 传递复杂数据
【发布时间】：2009-12-22 20:26:35
【问题描述】：

我正在考虑使用类似的东西：

<script src="http://www.example.com/?key={"param":"value"}">

正如您在上面的示例中看到的，一个 JSON 格式的字符串正在通过 src URL 传递。当然，该示例不起作用，因为 JSON 字符串和脚本标记都使用双引号。

以下是我能想到的几个解决方案：

在脚本标签中使用单引号。问题 - 在所有其他标签都使用双引号的页面中看起来不太好。
使用 &quot; 而不是 "。问题 - 使 src URL 难以阅读。
使用不使用双引号的 JSON 数据交换格式的替代格式。问题 - 我想不出一个好的候选人。

你怎么看？

【问题讨论】：

标签： html json data-structures standards

【解决方案1】：

您应该使用encodeUriComponent，然后在服务器上解码该值（您在服务器上使用什么语言？）。

【讨论】：

感谢您的建议！不过，我正在寻找不使用 JavaScript 的解决方案。
我假设您正在使用 javascript（它是 JSON）构建 src。如果您不使用javascript，那么您使用的是什么？这是在服务器上生成的吗？它是干什么用的？（我问，因为我可能为您提供另一种选择）。
脚本标签将由 Flash 应用程序生成，并用于嵌入网站小工具/组件。 flash 的 actionscript 和 javascript 之间的通信是可能的，最终我可以使用你建议的方法，但我更喜欢没有 javascript 的解决方案。
Actionscript 与 JavaScript 非常相似。我建议的（encodeUriComponent）也可以在 Actionscript 中使用。
这里是 adobe.com 的链接，了解有关编码 uri 的更多信息：livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/package.html

【解决方案2】：

数据需要有多复杂？如果只是键值对，那为什么不使用普通的表单 URL 编码呢？

<script src="http://www.example.com/?param=value&otherparam=othervalue">

【讨论】：

它已经够复杂了。在某些时候，它类似于 {"param":"value",{[{"param":"value","param":"value"},{"param":"value","param":"价值"}]}}

【解决方案3】：

查看Google Charts 的 URL 结构方式 - 它们提供了一些非常好的提示。

【讨论】：

【解决方案4】：

另一种选择是仅对 JSON 部分进行 urlencode。我不确定您是如何构建这些 URL 的，但如果是手动构建的，请使用：

{
  "param": "value",
  {
    [{
      "param": "value",
      "param": "value"
    }, {
      "param": "value",
      "param": "value"
    }]
  }
}

在 Firebug 中对该字符串调用“escape”，它会为您提供：

%7B%22param%22%3A%22value%22%2C%7B%5B%7B%22param%22%3A%22value%22%2C%22param%22%3A%22value%22%7D%2C%7B%22param%22%3A%22value%22%2C%22param%22%3A%22value%22%7D%5D%7D%7D

所以你会有一个脚本 URL，例如：

<script src="http://www.example.com/?key=%7B%22param%22%3A%22...

这些百分比的十六进制代码会被您的网络服务器转换回实际字节，因此您可以继续进行 JSON 解析“key”GET 参数并拥有一个不错的哈希/数组嵌套结构。

【讨论】：

谢谢！这是一个有趣的方法。然而，重要的是，就我所问的目的而言，该 URL 易于人类阅读。

【解决方案5】：

在类似的解决方案中，单引号很好，所以我建议这样做。

这个解决方案的好处是它用双引号将变量与 HTML 属性区分开来。

【讨论】：