Wie zum Speichern von Daten auf einer Seite und rufen Sie sich durch JQuery?

Question

Ich habe eine Reihe von Daten, die ich auf eine Seite echo werden mit PHP, und ich möchte JQuery es analysieren zu können. Allerdings möchte ich nicht die Daten unbedingt für den Benutzer sichtbar. Ich habe zum Beispiel:

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

Ich frage mich, wenn ich Daten in Spannweiten auf diese Weise zu speichern und dann in JQuery werden sollte, so dass sie onload versteckt und später, indem sie die Spanne Werte mit den Daten spielen:

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

Ist dies der effizienteste Weg, um Daten auf der Seite zu speichern? Soll ich stattdessen versteckte Eingänge verwendet werden, oder gibt es andere Möglichkeiten, dies zu tun?

Answer 1

Wenn Sie Ihre Daten mit PHP hallen, führt es durch json_encode () , wird diese erzeugen ein JavaScript-Objekt, das nativ liest von jQuery werden kann. Anschließend können Sie diese auf der Seite am unteren Rand ein, wenn der Antrag gestellt wird, oder holen sie on-the-fly mit 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

Ich vermute, Sie gehen viel Ajax-basierte Antworten zu bekommen, aber was dein Werk ist nicht wirklich Ajax. Sie schreiben Werte aus, die verfügbar sind, wenn der Server die Seite erstellt. Ajax wäre die Javascript zurück an den Server aufrufen, dass die Daten zu erhalten.

Also, warum nicht nur die Verwendung von PHP das Skript mit dem php zu schreiben?

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

Meine PHP ist ein bisschen rostig, aber man sollte die Idee. Dann gibt es nichts zu verbergen, die JavaScript enthält bereit, die Daten zu gehen.

Answer 3

Ich habe das schon mal gemacht mit Span, aber wenn man bedenkt wurden mit der jQuery Metadaten-Plugin ich das nächste Mal zu tun, etwas ähnliches benötigt.

Ihr Beispiel verwenden, könnte es wie strukturiert sein:

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

Answer 4

Haben Sie es als HTML zu tun?

Könnten Sie einfach Ausgabe eine JSON-Struktur?

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

Answer 5

Wenn Sie die Daten mit einem HTML-Elemente kombinieren mögen, dass Sie über JQuery wählen, dann ist jSonComments eine gute Plugin-Wahl: http://plugins.jquery.com/project/jSonComments

Sie können Ihre JSON direkt in einen HTML-Kommentar in Ihrer HTML-Struktur setzen.

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

und rufen Sie sie wie folgt:

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

Wie duckyflip vorgeschlagen, dass Sie die Daten in die HTML setzen können mithilfe json_encode () in PHP .