从单个锚标记传递大量数据答案

【问题标题】：Pass lots of data from a single anchor tag从单个锚标记传递大量数据
【发布时间】：2011-05-22 00:46:57
【问题描述】：

从单个链接传递大量数据的最佳方式是什么？这样的想法是个好主意还是有更好的方法？

<a href="{ 'id':'1', 'foo':'bar', 'something':'else' }" id="myLnk" > Click </a>


$('#myLnk).click( function(event){
  event.preventDeafult();
  var data = $(this).attr('href')
  console.log( $.parseJSON( response ) );

})

谢谢！

【问题讨论】：

为了得到最好的答案，你能给我们更多的背景信息吗？详细解释这段代码发生了什么，我如何渲染数据以及它的用途。
@Ancide，这只是一个一般性问题。我并没有真正尝试做任何具体的事情。只是想知道最佳实践是什么。
好吧，为什么我想知道只是因为在这种情况下，取决于上下文有不同的答案。根据上下文，哪个效果更好。

标签： javascript jquery object

【解决方案1】：

最好的方法可能是在你的锚标记中使用custom data attributes。

例如：

<a href="#" data-json="{ 'id':'1', 'foo':'bar', 'something':'else' }">Click</a>

然后，您可以使用 jQuery data() 函数从 JavaScript 轻松访问这些数据。

或者，您可以将其拆分为单独的属性，而不是将所有数据捆绑在一个 JSON 块中：

<a id="myLnk"
    data-id="1"
    data-foo="bar"
    data-something="else">

然后可以像这样使用 jQuery 检索这些：

$("#myLnk").data("id")
$("#myLnk").data("foo")
$("#myLnk").data("something")

【讨论】：

感谢 Chris（和 html5），这正是我想要的。
克里斯，$.data() 见下面我的注释...实际上，我自己发现了这一点。
有没有办法将数据发布到另一个页面？还是这纯粹是为了查看同一页面上的数据？

【解决方案2】：

推荐的方式是使用HTML5的data-*属性：

<a href="#" id="myLnk" data-id="1" data-foo="bar" data-something="else">Click</a>

【讨论】：

【解决方案3】：

要添加到 Chris 和 MvChr 的回复中，您也可以这样做，尽管我讨厌使用单引号作为属性：

<a href='#' data-json='{ "id":1, "foo":"bar", "something":"else" }'>Click</a>

使用这种语法的原因是，如果你正确引用它，jQuery 中的 $.data 将自动工作。否则，你必须 $.parseJSON($.data(selector)) 的信息。

【讨论】：