Как хранить данные на странице и получать их через JQuery? - PullRequest
Новая
       14

Как хранить данные на странице и получать их через JQuery?

3 голосов
/ 22 мая 2009

У меня есть массив данных, которые я буду отображать на странице с помощью 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();
    });
});

Является ли это наиболее эффективным способом хранения данных на странице? Стоит ли использовать вместо этого скрытые входы или есть другие способы сделать это?

Ответы [ 5 ]

7 голосов
/ 22 мая 2009

Когда вы отображаете ваши данные с помощью PHP, пропустите их через json_encode () , это создаст объект javascript, который может быть изначально прочитан jQuery. Затем вы можете вставить его внизу страницы, когда запрос сделан, или получить его на лету, используя 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
0 голосов
/ 22 ноября 2010

Если вы хотите объединить данные с HTML-элементом, который вы выбираете с помощью JQuery, тогда jSonComments - хороший выбор плагина: http://plugins.jquery.com/project/jSonComments

Вы можете поместить свой JSON непосредственно в HTML-комментарий в вашей HTML-структуре. 

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

и получить его так: 

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

Как и предположил duckyflip, вы можете поместить данные в HTML, используя json_encode () в PHP.

0 голосов
/ 22 мая 2009

Вы должны сделать это как HTML?

Не могли бы вы просто вывести структуру JSON? 

var data1 = {
                width: 5,
                height:10,
                depth:15
             }
...
0 голосов
/ 22 мая 2009

Я делал это раньше с помощью span, но рассматривал возможность использования плагина метаданных jQuery в следующий раз, когда мне нужно было сделать нечто подобное.

Используя ваш пример, он может быть структурирован как: 

<div id="data-1" class="{width: 5, height: 10, depth: 15}"></div>
0 голосов
/ 22 мая 2009

Я подозреваю, что вы получите много ответов на основе 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 содержит данные, готовые к работе.

...