Daten aus PHP Datei mit json übergeben und in unterschiedlichen Divs anzeigen

creativeheadz

Erfahrenes Mitglied
Hey ich nutze jquery und lade sekündlich Daten aus einer PHP Datei in ein Div. Bisher ist es so das alle Daten meiner PHP Datei in einDIV geladen werden.

Nun möchte ich jedoch die Daten in meiner PHP datei aufsplitten und unterschdlichen DIV ausgeben. Dies möchte ich gern mittels json umsetzen. Ich habe leider nur keine Idee wie ich das in meinen JavaScript COde einbaue.

Mein derzeitiger Code sieht wie folgt aus:

HTML:
<script type="text/javascript">
    $(function() {
        (function updateLoop(){
            $("#updateElement").load('page/inc/php/get_ItemData.php', function (){
                setTimeout(updateLoop(), 1000);
            });
        })();
    });

</script>


<div id="updateElement"></div>

get_ItemData.php

PHP:
$namen = array(
    'test1'    =>  20,
    'test2'    =>  65
);
echo json_encode($namen);

Die Ausgabe sieht wie folgt aus:

{"test1":20,"test2":65}


Wie muss mein JS Code abgewandelt werden damit ich diesen json Code entsprechend Parse und in den Divs

<div id="test1"></div>
<div id="test2"></div>

anzeigen lassen kann

Gruß
 
Oder du lädst dir eine jSon lib( https://github.com/douglascrockford/JSON-js ) und parste den String den dir der Request wieder gibt. Dazu musst du aber $.ajax verwenden und bei success dann halt den String mit json decoden. Das gibt dir dann ein Objekt mit dem du arbeiten kannst, das ist dann aufgebaut wie der String.

Grüße
 
Hey mein Problem ist die Umsetzung per jquery. Ich atte mir mal eine Lösung gestrickt ohne ein Framework allerdings hat man mir berechtigterweise davon abgeraten. Außerdem merke ich bei der Anwendung folgendes Codes erhebliche Serverbelastung..

HTML:
setInterval("loadauctiondata()",1000 );

function loadauctiondata()
{
 if (xmlHttp) {
     xmlHttp.open('GET', 'getdata.php', true);
     xmlHttp.onreadystatechange = function () {
         if (xmlHttp.readyState == 4) {
		 
var obj = eval('(' + xmlHttp.responseText + ')');
document.getElementById('preis').innerHTML = obj.preis;
document.getElementById('text').innerHTML = obj.text;

         }
		 
     };
     xmlHttp.send(null);
	 
 }
}

hier konnte ich einfach per Div id die einzelnen Daten aus der php Datei ausgeben. Kann man das nicht ähnlich beim meinem Code aus dem ersten Post umsetzen? Ich steige bei dem jquery noch nicht so hinter...
 
Ist einfacher als man denken mag:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
  $(function() 
  {
    (
      function updateLoop()
      {
        $.getJSON('page/inc/php/get_ItemData.php', 
                  function(data) 
                  {
                    $.each(data,function(k,v){$('#'+k).text(v)});
                    setTimeout(updateLoop, 1000);
                  });
      })();
  });
</script>
</head>
<body>
  <div id="test1"></div>
  <div id="test2"></div>
</body>
</html>
 
Zurück