WEBDESIGN

JSON mit PHP und Javascript / jQuery

Json (JavaScript Object Notation) ist ein Format um Daten und Objekte zu serialisieren und einfach austauschbar zu machen. Im Gegensatz zum tag - basierten XML wirkt JSON deutlich schlanker. JSON ist wahrscheinlich das meist genutzte Format um Daten zwischen Client und Server auf Ajaxbasis zu tauschen.

Beispiel (Quelle:Wikipedia):

{
  "Herausgeber": "Xema",
  "Nummer": "1234-5678-9012-3456",
  "Deckung": 2e+6,
  "Währung": "EUR",
  "Inhaber": {
    "Name": "Mustermann",
    "Vorname": "Max",
    "männlich": true,
    "Depot": {},
    "Hobbys": [ "Reiten", "Golfen", "Lesen" ],
    "Alter": 42,
    "Kinder": [],
    "Partner": null
  }
}

Es gilt hierbei die Beziehung “Name”:Wert, wobei Wert ein Array, Null, boolscher Wert(true/false), String oder ein allgemeines anderes Objekt sein kann.

Wir wollen uns jetzt aber mal nicht mit der Theorie beschäftigen, sondern mit der Praxis, wie wir das Ganze anwenden können.

JSON mit PHP erzeugen

Damit dem Client (Browser) ein JSON Datenobjekt geschickt werden kann, müssen wir zuerst einmal eines auf der Serverseite erzeugen. Zum Glück nimmt uns diese Arbeit PHP komplett ab, da bereits eine Funktion “json_encode()” existiert.

Angenommen wir haben auf unserer Seite ganz viele Artikel, welche aus einer Datenbank kommen und in einem Array gespeichert sind.

//....
while($db_stmt->fetch()) :
    $artikel[] = array('Titel' => $title, 
                              'Datum' => $date);
endwhile; 
//....
// Array in das JSON - Format umwandeln
echo json_encode($artikel);

jQuery / Javascript – Ajax Json

Nachdem wir nun wissen wie wir ganz einfach Daten mit PHP in das JSON Format bekommen, nämlich in dem wir einfach “json_encode($data)” anwenden, wollen wir diese Daten natürlich noch Clientseitig mit Javascript bzw. jQuery weiterverarbeiten.

In der Praxis macht uns jQuery auch hier das Leben wieder einfach.

$.getJSON('http://example.com?get=new_article', function(data) {
  var article = '';

  $.each(data, function(key, val) {
      article += '<div> Der Artikel '+val['Titel'] +' wurde am '+ val['Datum'] + ' veröffentlicht </div>'; 
  });
$('#article_container').prepend(article); 
});

Erläuterung:
mit der jQuery Funktion getJSON, wird ein Ajax-Request an die Adresse “http://example.com?get=new_article” gesendet. Sobald der Server mit den Daten antwortet, wird die Funktion “function(data)” ausgeführt. In der Variable “data” ist das JSON – Datenobjekt gespeichert. Mit der foreach – Schleife gehen wir alle Artikel nacheinander durch, da es sich jeweils um ein mehrdimensionales Array handelt, greifen wir per val['Titel'] bzw. val['Datum'] darauf zu.

Nochmal zur Verdeutlichung der foreach – Schleife, angenommen wir haben diesen Array:

$array[0]['Datum'] = '21.12.2011';
$array[0]['Titel'] = 'Hans Wurst Artikel';

$array[1]['Datum'] = '22.12.2011';
$array[1]['Titel'] = 'Peter Panzer Artikel';

echo json_encode($array);

Dann greifen wir beim ersten Schleifendurchlauf auf den Hans Wurst Artikel zu und bei dem zweiten Durchlauf auf den Peter Panzer Artikel.
Damit können wir die Daten weiterverarbeiten und mit ihnen anstellen was wir wollen, z.B. neue Artikel laden, eine neue Seite von Artikeln laden und so weiter.



Kommentare ( 3 Kommentare )

  • Yannick Antworten ↓

    Danke für diesen Beitrag, genau das, was ich gesucht habe!

  • Kamikaze_MH Antworten ↓

    Also bei mir klappt das nicht.
    ich habe eine php datei auf server 1 die erstellt mir
    [{"id":"4","name":"kami","pass":"ohoh","ort":"haha","lat":"51.2233","lon":"6.788","korr":"10"}]
    JSON Antwort
    und ein Java Script auf Server2

    $.getJSON("http://s336050781.online.de/test/web-api/frage.php?user=kami&format=json", function(data) { var article ='0'; 
    																							  $each(data, function(key, val){
    																													article +='id '+val['id']+
    																																	'a' +val['name']+
    																																	'b' +val['pass']+
    																																	'c' +val['ort']+
    																																	'd' +val['lat']+
    																																	'e' +val['lon']+
    																																	'f' +val['korr']+'eintrag';
    																													});
    																						
    																							   $('#main').prepend(article);
    

    });

    wenn ich das ausführen möchte bekomm ich aber keine Anzeige zurück.
    Könnt ihr mir helfen ?

    • m0d Antworten ↓

      Hallo,

      schau dir am besten mal die Antwort vom Server mit Firebug für Firefox oder mit den Developer Tools von Chrome an, dann solltest du schnell sehen wo der Fehler liegt. Beachte auch die Same origin policy, möglicherweise spielt das in deinem Fall eine Rolle.

Schreib einen Kommentar