ページにデータを保存してJQueryを通じて取得する方法は？

Question

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> 

：

$(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を使ってスクリプトを書くのはなぜですか？

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

私のPHPは少し錆びていますが、あなたはそのアイデアを得るべきです。その後、隠すものは何もなく、javascriptには準備が整うデータが含まれています。

Answer 3

私はスパンのと前にこれを行っているが、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

あなたがHTMLに直接あなたのJSONを配置することができますあなたのHTML構造のコメント

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

とこのようにそれを取得：duckyflipはあなたがPHPでjson_encode()を使用してHTMLにデータを置くことができます示唆したように

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

。