PHP ve Jquery Ajax ile anahtar ve değer ikilisinden oluşan verinin $.getJSON ve $.each fonksiyonu yardımıyla kullanımı

PHP ile veritabanı bağlantısı kurup verileri satır satır tablodan çekip Json verisine çevireceğiz ve istemciye yollayacağız. Bu işi yaptığımız php dosyasına, Jquery $.getJSON fonksiyonu ile Ajax isteğinde bulunacağız ve gelen Json verisini $.each fonksiyonuyla ayıklayacağız. Bu ayıklama işlemini anahtar ve değer ikilisi mantığıyla hazırladığımız Json verisi üzerinde Jquery ile yapacağız. Kısaca PHP ile istemciye Json verisi yollayacağız ve Jquery ile veriyi ayıklayıp kullanıcıya göstereceğiz.

PHP ile veritabanından json verisi yaratacağımız tablo verilerine göz atalım. Tabloda örnek vermek amacıyla rasgele veri girdim. Tablonun adı 'people'

json-jquery-php-anahtar-deger-ajax-tablo

PHP ile anahtar ve değer düzeniyle Json verisi yaratma kısmı :

Şimdi tablodaki verileri Json verisine çevirecek PHP dosyamızı oluşturalım.
php-json-ajax.php :
// veritabanına bağlanıyoruz.
$conn = mysql_connect('localhost','root','');
mysql_select_db('test' );

// people tablosundan verileri çekiyoruz.
$result = mysql_query("SELECT * FROM people");
// verileri dolduracağımız diziyi yaratıyoruz.
$people = array(); 

// while döngüsünde tablodan verileri satır satır alarak
// people dizisine ekliyoruz.
while ($row = mysql_fetch_assoc($result))
{
array_push($people, $row );
}
// Verileri içeren diziyi ekrana bastırıyoruz.
echo json_encode($people);
İnternet tarayıcısını açıp çıktıya bakalım istediğimiz gibi bir Json verisi elde edebildik mi:

json-jquery-php-anahtar-deger-ajax-cikti

Yukarıda gördüğümüz Json verisine dikkatli baktığımızda tablodaki satırlar birer dizi olarak ana diziye eklenmiş. Mavi renkte olan satırları kırmızı olanlar ise satırdaki sütün isimlerini ve değerleri barındırıyor. Jquery ile ajax isteğinde buluncağımız $.Json fonksiyonunu ve gelen Json tipi veriyi işleyecek callback fonksiyonunu yazmamız gerekiyor bu aşamada.

Jquery $.getJSON ve $.each fonksiyonu kullanma kısmı :

Jquery kütüphanesini sunucuya (php-json-ajax.php dosyasına) yapacağımız Ajax isteği daha rahat olduğu için tercih ediyoruz. Tabi anahtar ve değer ikilisi düzeniyle gelen Json tipi verisiyi işlemek için $.each fonksiyonun rahatlığından yararlanacağız. Boş bir .html dosyası oluşturup head kısmına aşağıdaki Jqery kodunu <script> etiketleri arasına ekleyelim.

Jquery kodumuz:
 $(document).ready(function () {
  
  // json verisini alacak php dosyasının adresini
  //  bu global değişkene yazıyoruz.
  var json_verisi_alinacak_php_dosyasi = 'php-json-ajax.php' ;
  
  // Jquery getJson fonksiyonu ile Json verisini sayfa yenilenmeden alıyoruz.
  $.getJSON( json_verisi_alinacak_php_dosyasi, { }, 
	function(data){
		
		// Verileri satırlara bölecek  each fonksiyonu
		$.each(data, function(key, value){
			// Satırı geçici olarak satir değişkenine kaydediyoruz.
			var satir = value;	
			// Satırı sütünlara bölecek each fonksiyonu
			$.each(satir, function(key, value){
				// satır ismini ve değerini okuyarak id özniteliği 'icerik'
				// olan div elamanına ilgili satırın sütün 
				// ismini ve değerini  ekliyoruz.
				$('#icerik').append(key + " : " + value + '<br />');
				
			});	
		});	
			
	});	
  
  });  
  
$('div #icerik') ile verileri göstereceğimiz div elamanını seçiyoruz. Bu yüzden oluşturduğumuz .html dosyasının body kısmına id özniteliği 'icerik' olan bir div elemanı (< div id="icerik"> </div> ) eklememiz gerekeyiyor.

Sıfırdan yarattığımız bu .html dosyasını internet tarayısında sonucuna bakalım:

json-jquery-php-anahtar-deger-ajax-sonuc

Sonuç olarak Jquery ile sunucuya Ajax istediğinde bulunup gelen cevabı (Json verisini) işleyip ekranda gösterdik. Örnekle ilgili dosyaları json-jquery-php-anahtar-deger'den indirebilirsiniz.
yazan Zülküf Küçüközer tarih   14th September 2009
primary key words  Php | Jquery | Ajax | Json okunma  10797
secondary key words  $.each | $.getjson | Anahtar-değer
writing isik cobanoglu writing 16th January 2012
temiz anlatım... anlaşılır örnekler... emeğinize sağlık.
writing Halil writing 1st May 2012
Allah Razı Olsun.Çok İşime Yaradı.Sagolun PAylaşım İçin
writing Sinan Basalan writing 22nd November 2012
Çok iyi bilgiler vermeyiple kalmayıp onları daha anlaşılır şekilde sunmak bizlere çok yararlı oluyor. Makalelere lütfen devam edin. Teşekkürler