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

我有一组数据，我将使用PHP回显到一个页面，并且我希望JQuery能够解析它。但是，我不希望用户可以看到数据。我有，例如：如何在页面上存储数据并通过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中，隐藏它们onload事件和后来得到的跨度值与数据玩：

$(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(); 
    }); 
});

这是在页面上存储数据的最有效方式吗？我是否应该使用隐藏的输入，还是有其他方法来执行此操作？

来源

2009-05-22 ash

当您使用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

来源

2009-05-22 18:42:04 duckyflip

我喜欢这个主意！感谢您的帮助 - 也感谢所有其他人。 – ash 2009-05-23 05:51:34

如果您想将此JSON与特定的HTML元素相结合，请查看下面的答案：http://stackoverflow.com/questions/899327/how-to-store-data-on-a-page-and-检索它通过jquery/4246901＃4246901 – Andreas 2010-11-22 15:20:13

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

那么，为什么不使用PHP来编写脚本使用PHP？

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

我的PHP有点生疏，但你应该明白了。然后没有什么可以隐藏的，javascript包含准备好的数据。

来源

2009-05-22 18:39:54

我有跨度的这样做过，但使用接下来的时间，我需要做类似的事情jQuery的metadata plugin一直在考虑。

使用您的例子，它可以被结构类似：

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

来源

2009-05-22 18:53:42 ern

你必须这样做，因为HTML？

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

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

来源

2009-05-22 18:58:15

如果你想将数据与一个HTML元素结合起来，你通过JQuery选择，然后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。

来源

2010-11-22 15:19:13 Andreas

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

回答

相关问题