使用 HTML 数据标签和 jQuery 存储和使用数组答案

【问题标题】：Store and use an array using the HTML data tag and jQuery使用 HTML 数据标签和 jQuery 存储和使用数组
【发布时间】：2011-05-16 07:21:04
【问题描述】：

我试图在 HTML 数据标签中存储一个数组。例如：

<div data-locs="{'name':'London','url':'/lon/'},{'name':'Leeds','url':'/lds'}">

我正在使用 jQuery 访问该数据。我意识到这是作为字符串存储的，并且我尝试了各种方法将其转换为数组，但我碰壁了。如果你看一下这个 jsFiddle 页面，你会看到我正在尝试做的完整示例。

http://jsfiddle.net/B4vFQ/

有什么想法吗？

谢谢！

【问题讨论】：

标签： jquery html arrays

【解决方案1】：

试试这个：

var testOne = eval("new Array(" + $('#locations').data('locations') + ")");

查看jsfiddle。

【讨论】：

这不是提取数据的好方法或安全方法，请尽可能避免使用eval()。在这里使用实际的 JSON 更正确更快，为什么不使用正确的标记呢？ :)
@Nick：是的，我同意在属性中添加 [] 是一个更好的选择
实际上并不能解决问题，引号也不正确，但绝对是更好的方法，解决问题而不是症状

【解决方案2】：

尝试将[ 和] 添加到开头和结尾（这使其成为有效的JSON）。完成后，您可以使用JSON.parse() 将其转换为原生 JavaScript 对象。

【讨论】：

如果它是有效的 JSON（双引号），jQuery 已经这样做了......只需添加 [] 就会爆炸，因为原生 JSON.parse 需要有效的 JSON 才能工作，而单引号不是:)
@Nick Craver：你是对的！我不知道 jQuery 会自动执行此操作。太棒了。

【解决方案3】：

如果您使用有效的 JSON（[ 和 ] 用于数组，双引号而不是单引号），如下所示：

<div id="locations" data-locations='[{"name":"Bath","url":"/location/bath","img":"/thumb.jpg"},{"name":"Berkhamsted","url":"/location/berkhamsted","img":"/thumb.jpg"}]'>

然后你有什么（使用.data()）来获取数组将起作用：

$('#locations').data('locations');

You can test it here.

【讨论】：

+1 我没有意识到 jQuery 会自动为您解析 JSON。你碰巧知道它是如何检测到它的吗？或者它只是做一个try/catch。编辑：没关系，看起来是try/catch。
@patrick - 带有 .data() 的 jQuery 1.4.3+ 在这里完成工作，它检测类型...也转换数字等
@cambraca - 如果浏览器支持它，是的，但必须调用 JSON.parse()（如果它是 JSON，jQuery 会这样做），你可以在这里看到它：github.com/jquery/jquery/blob/master/src/data.js#L203-218跨度>
@Nick - 是的，我只是想知道.data() 怎么知道它是JSON。答案似乎是它不做任何特定的检测。只是尝试一下。编辑：我应该澄清一下，在我原来的评论中，我并不是说 jQuery 本身正在解析JSON。这是草率的措辞。
一个小问题：你需要用单引号括住 data-foo html 属性，用双引号括住有效的 JSON。使用有效的 JSON（我只是在 php 中使用 json_encode() 生成它），然后您将数据本身中的任何双引号转义为 \"。但是，如果您在数据本身中有任何单引号（我的数据包含可以的名称，例如例如，是 O'Connor）然后整个事情就崩溃了，因为只有 json 中直到单引号的部分被计为属性值。用 \' 转义不起作用，但似乎 html 实体可以。例如 str_replace ("'", "’", json_encode($foo))

【解决方案4】：

如果您出于某种原因坚持使用双引号，则需要对数据属性中的引号进行 html 编码。

<div data-dwarfs="[&quot;Doc&quot;, &quot;Sneezy&quot;, &quot;Happy&quot;]"></div>

当然，如果您可以访问 PHP 或其他一些预处理器，您可以使用类似这样的东西：

<?php
    $dwarfs = ['Doc', 'Sneezy', 'Happy'];
?>
    <div data-dwarfs="<?php echo htmlspecialchars(json_encode($dwarfs), ENT_QUOTES, 'UTF-8') ?>"></div>
<?php

【讨论】：

感谢您的反对票，但我向您保证，我对此进行了彻底的测试，因此我确信我的回答是正确的。