JSON Verisi Nedir?
JSON (JavaScript Object Notation), veri depolama ve aktarma için kullanılan hafif bir veri değişim formatıdır. İnsanlar tarafından kolayca okunabilir ve yazılabilir, makineler tarafından da kolayca ayrıştırılabilir ve oluşturulabilir.
jQuery ile JSON Okuma
jQuery, JSON verilerini okumak için birkaç farklı yöntem sunar. En yaygın kullanılan yöntemlerden biri $.getJSON() fonksiyonudur.
1. $.getJSON() Fonksiyonu:
Bu fonksiyon, bir URL'den JSON verilerini almak için kullanılır.
JavaScript
$.getJSON("veri.json", function(veri) {
// JSON verileri "veri" değişkeninde
console.log(veri);
// JSON verilerindeki verilere erişim
console.log(veri.ad);
console.log(veri.yas);
});
2. $.ajax() Fonksiyonu:
$.ajax() fonksiyonu, daha fazla esneklik sunar ve farklı HTTP istekleri (GET, POST, vb.) için kullanılabilir.
JavaScript
$.ajax({
url: "veri.json",
dataType: "json",
success: function(veri) {
// JSON verileri "veri" değişkeninde
console.log(veri);
}
});
JSON Verilerini Yazdırma
JSON verilerini okuduktan sonra, bu verileri web sayfanızda farklı şekillerde görüntüleyebilirsiniz.
1. Basit Yazdırma:
JavaScript
$.getJSON("veri.json", function(veri) {
$("#sonuc").text(JSON.stringify(veri));
});
Bu kod, JSON verilerini bir <div id="sonuc"> öğesine metin olarak yazdırır.
2. Tablo Oluşturarak Yazdırma:
JavaScript
$.getJSON("veri.json", function(veri) {
var tablo = "<table><tr><th>Ad</th><th>Yaş</th></tr>";
$.each(veri, function(anahtar, deger) {
tablo += "<tr><td>" + deger.ad + "</td><td>" + deger.yas + "</td></tr>";
});
tablo += "</table>";
$("#sonuc").html(tablo);
});
Bu kod, JSON verilerini bir HTML tablosu olarak görüntüler.
Örnek JSON Dosyası (veri.json):
JSON
[
{ "ad": "Ahmet", "yas": 30 },
{ "ad": "Ayşe", "yas": 25 },
{ "ad": "Mehmet", "yas": 35 }
]
Önemli Notlar:
JSON (JavaScript Object Notation), veri depolama ve aktarma için kullanılan hafif bir veri değişim formatıdır. İnsanlar tarafından kolayca okunabilir ve yazılabilir, makineler tarafından da kolayca ayrıştırılabilir ve oluşturulabilir.
jQuery ile JSON Okuma
jQuery, JSON verilerini okumak için birkaç farklı yöntem sunar. En yaygın kullanılan yöntemlerden biri $.getJSON() fonksiyonudur.
1. $.getJSON() Fonksiyonu:
Bu fonksiyon, bir URL'den JSON verilerini almak için kullanılır.
JavaScript
$.getJSON("veri.json", function(veri) {
// JSON verileri "veri" değişkeninde
console.log(veri);
// JSON verilerindeki verilere erişim
console.log(veri.ad);
console.log(veri.yas);
});
2. $.ajax() Fonksiyonu:
$.ajax() fonksiyonu, daha fazla esneklik sunar ve farklı HTTP istekleri (GET, POST, vb.) için kullanılabilir.
JavaScript
$.ajax({
url: "veri.json",
dataType: "json",
success: function(veri) {
// JSON verileri "veri" değişkeninde
console.log(veri);
}
});
JSON Verilerini Yazdırma
JSON verilerini okuduktan sonra, bu verileri web sayfanızda farklı şekillerde görüntüleyebilirsiniz.
1. Basit Yazdırma:
JavaScript
$.getJSON("veri.json", function(veri) {
$("#sonuc").text(JSON.stringify(veri));
});
Bu kod, JSON verilerini bir <div id="sonuc"> öğesine metin olarak yazdırır.
2. Tablo Oluşturarak Yazdırma:
JavaScript
$.getJSON("veri.json", function(veri) {
var tablo = "<table><tr><th>Ad</th><th>Yaş</th></tr>";
$.each(veri, function(anahtar, deger) {
tablo += "<tr><td>" + deger.ad + "</td><td>" + deger.yas + "</td></tr>";
});
tablo += "</table>";
$("#sonuc").html(tablo);
});
Bu kod, JSON verilerini bir HTML tablosu olarak görüntüler.
Örnek JSON Dosyası (veri.json):
JSON
[
{ "ad": "Ahmet", "yas": 30 },
{ "ad": "Ayşe", "yas": 25 },
{ "ad": "Mehmet", "yas": 35 }
]
Önemli Notlar:
Jquery ile JSON veri okuma ve yazdırma
4/
5
Oleh
WebYazilimciniz
Lütfen yorum yaparken şunlara dikkat ediniz:
Küfürlü, siyasi veya huzur bozucu yorumlar yapmamaya,
Reklam, spam gibi yorumlar yapmamaya.