Jquery ile JSON veri okuma ve yazdırma

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:

• $.getJSON() fonksiyonu, varsayılan olarak GET isteği gönderir.
• $.ajax() fonksiyonu, farklı istek türleri (POST, PUT, DELETE, vb.) için yapılandırılabilir.
• JSON verilerini okuduktan sonra, bu verileri web sayfanızda istediğiniz şekilde görüntüleyebilirsiniz.
• JSON verilerini yazdırırken, JSON.stringify() fonksiyonunu kullanarak nesneleri metin formatına dönüştürebilirsiniz.
• JSON verilerini okurken ve yazdırırken, hata ayıklama için tarayıcınızın geliştirici araçlarını (konsol) kullanabilirsiniz.

 

Tweet

Benzer Yayınlar

Jquery ile JSON veri okuma ve yazdırma

4/ 5

Oleh WebYazilimciniz

WebYazilimciniz Mart 22, 2025 Yorum