Question

我有一个数据数组，我将使用PHP回显一个页面，我希望JQuery能够解析它。但是，我不希望数据必须对用户可见。我有，例如：

<div id="data-1">
    <span id="width">5</span>
    <span id="height">10</span>
    <span id="depth">15</span>
</div>
<div id="data-2">
    <span id="width">10</span>
    <span id="height">20</span>
    <span id="depth">30</span>
</div>

我想知道我是否应该以这种方式存储数据，然后在JQuery中隐藏它们并通过稍后获取跨度值来播放数据：

$(document).ready( function() {
    $("#width, #height, #depth").hide();
    $("#data-*").click(function() {
        var width = $("#width", $(this)).text();
        var height = $("#height", $(this)).text();
        var depth = $("#depth", $(this)).text();
    });
});

这是在网页上存储数据的最有效方式吗？我应该使用隐藏的输入，还是有其他方法可以做到这一点？

Answer 1

当您使用PHP回显数据时，将其传递给json_encode()，这将生成一个可由jQuery本机读取的javascript对象。然后，您可以在发出请求时将其插入页面底部，或使用AJAX即时获取。

PHP：

$my_data = array(
   'data1' => array(
      'width' => 16,
      'height' => 20
    ),
   'data2' => array(
      'width' => 16,
      'height' => 20
    )
);

# echo at bottom of page
echo '<script type="text/javascript">';
echo 'window.my_data = '.json_encode($my_data);
echo '</script>';

jQuery的：

var height = window.my_data.data1.height

Answer 2

我怀疑你会得到很多基于ajax的答案，但你所做的并不是真正的ajax。您正在编写服务器创建页面时可用的值。 Ajax将是回调服务器以获取该数据的javascript。

那么为什么不使用php来编写使用php的脚本？

$(document).ready( function () {
   $("#data-*").click(function() {
      var width = <?=$width_var_in_php?>;
      var height = <?=$height_var_in_php?>;
   });
});

我的php有点生疏，但你应该明白这个想法。然后没有什么可隐藏的，javascript包含准备好的数据。

Answer 3

我之前用span做过这个，但是下次我需要做类似的事情时一直在考虑使用jQuery metadata plugin。

使用您的示例，它可以结构如下：

<div id="data-1" class="{width: 5, height: 10, depth: 15}"></div>

Answer 4

你必须以HTML格式进行吗？

你能简单地输出一个JSON结构吗？

var data1 = {
                width: 5,
                height:10,
                depth:15
             }
...

Answer 5

如果你想将数据与你通过JQuery选择的HTML元素相结合，那么jSonComments是一个很好的插件选择： http://plugins.jquery.com/project/jSonComments

您可以将JSON直接放入HTML结构中的HTML注释中。

<div id="getMyData">
<!-- Metadata
        {
        "foo":"bar"
        }
-->
</div>

并像这样检索它：

$('div#getMyData').jSonComments().foo

正如duckyflip建议您可以使用PHP中的json_encode()将数据放入HTML中。

如何在页面上存储数据并通过JQuery检索它？

5 个答案: