Comment stocker des données sur une page et le récupérer par JQuery?

Question

J'ai un tableau de données que je vais faire écho à une page en utilisant PHP, et je veux JQuery pour pouvoir l'analyser. Cependant, je ne veux pas nécessairement les données visibles à l'utilisateur. J'ai, par exemple:

<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>

Je me demande si je devrais stocker des données dans des portées de cette façon, puis en JQuery, en les cachant onload et jouer avec les données en obtenant les valeurs de portée plus tard:

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

Est-ce la façon la plus efficace pour stocker des données sur la page? Dois-je utiliser à la place, les entrées cachées, ou y at-il d'autres façons de le faire?

Answer 1

Lorsque vous faisant écho à vos données avec PHP, passer par json_encode () , cela va générer un objet javascript qui peut être lu en mode natif par jQuery. Vous pouvez alors insérer en bas de la page lorsque la demande est faite, ou chercher sur la volée en utilisant 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

Je suppose que vous allez obtenir beaucoup de réponses à base de ajax, mais ce que vous faites est pas vraiment ajax. Vous écrivez des valeurs que sont disponibles lorsque le serveur crée la page. Ajax serait le javascript appelant au serveur pour obtenir ces données.

Alors pourquoi ne pas simplement utiliser le php pour écrire le script en utilisant le php?

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

Mon php est un peu rouillé, mais vous devriez avoir l'idée. Ensuite, il n'y a rien à cacher, le javascript contient les données prêtes à partir.

Answer 3

Je l'ai fait avant avec son envergure, mais ont été envisagez d'utiliser le jQuery métadonnées plug-in la prochaine fois que je devais faire quelque chose de similaire.

En utilisant votre exemple, il pourrait être structuré comme:

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

Answer 4

Avez-vous le faire en HTML?

Pourriez-vous simplement la sortie d'une structure JSON?

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

Answer 5

Si vous voulez combiner les données avec un élément HTML, que vous sélectionnez via JQuery, puis jSonComments est un bon plugin-choix: http://plugins.jquery.com/project/jSonComments

Vous pouvez placer votre JSON directement dans un commentaire HTML dans votre HTML structure.

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

et récupérer comme ceci:

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

Comme suggéré duckyflip vous pouvez mettre les données dans le code HTML en utilisant json_encode () en PHP .