如何在頁面上存儲數據並通過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檢索？

回答

相關問題