18. Gün – jQuery Dersi 18

On sekizinci jQuery dersimizde aşağıdakileri öğredik;
– jQuery $.post Metodu
– jQuery $.get Metodu
– jQuery Success, Error ve Complete Metodları

jQuery $.post / $.get Metodları Kullanımı;

Bu metodun yapısı şu şekildedir;

$.post(AJAX_URL, GONDERİLECEK_VERİLER, GELEN_VERİ, VERİ_TİPİ)

Buna göre dolduracak olursak;

$.post("ajax.php", {"isim":"tayfun","soyisim":"erbilen"},
	function(cevap)
	{
		alert(cevap);
	}
);

Ajax dosyamız ise şu şekilde olacak;

<?php

	$isim = $_POST["isim"];
	$soyisim = $_POST["soyisim"];
	
	echo $isim." ".$soyisim;

Dizi halinde değer göndermek için;

$.post("ajax.php", {"id[]", ["1","2","3","4","5","6"]},
	function(cevap)
	{
		alert(cevap);
	}
);

JSON çıktısı almak isteseydik, 4. parametre olarak (veri tipini) json yapmamız gerekirdi.. Yani;


$.post("ajax.php", {"isim":"tayfun","soyisim":"erbilen"}, function(cevap) {
	if (cevap.hata)	{
		alert(cevap.hata);
	} else	{
		alert(cevap.ok);
	}
}, "json");

Buna bağlı olarak ajax.php dosyası ise şöyle olmalıydı;

<?php

	$isim = $_POST["isim"];
	$soyisim = $_POST["soyisim"];
	
	if (!$isim || !$soyisim)
	{
		$array["hata"] = "Boş alan bırakmayın!";
	}
	else
	{
		$array["ok"] = $isim." ".$soyisim;
	}
	
	echo json_encode($array);

Success: Bu metod ajax isteği başarılı bir şekilde tamamlanırsa çalışır.
Error: Bu metod ajax isteğinde herhangi bir hata alınırsa çalışır. (örneğin ajax dosyasının bulunamaması gibi ya da isteğin zaman aşımına uğraması gibi..)
Complete: Bu metod ajax isteği başarılı ya da başarısız olduğu her iki durumda da çalışacaktır.

Yukarıdaki metodlarla ilgili örnek kullanımları videoda bulabilirsiniz.

$.get metodunun kullanımı da $.post metodu ile tamamen aynıdır.. Tek farkı ajax.php dosyasında verileri $_POST metodu yerine $_GET metoduyla almamızdır.. İsterseniz $_REQUEST metodu ile her iki metod için geçerli şekilde değerleri alabilirsiniz.

Bu dersi anlayabilmek için PHP bilginizin iyi olması gerekiyor. jQuery’nin html sayfasındaki nesnelere müdehale etmesi gibi, güzelde bir ajax sınıfı bulunuyor.. Henüz hepsini görmedik ancak iyi bir başlangıç yaptık 🙂


Ders Dosyalarını İndirin;
http://yadi.sk/d/0fINV-O202dJ2

Demoya Gözatın;
http://www.prototurk.com/demo/jquery-ajax-metodlari-1/index.html

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“18. Gün – jQuery Dersi 18” üzerine 14 yorum

  1. Teşekkür ederim tayfun, çok başarılı derslerin, bilgisi olup anlatamayanlar vardır hem bilgisi olup hemde çok iyi anlatan çok yönlü insanlar vardır, kendime geliştirmeme çok yardımcı oldun, 2 haftadır 1 kayıt formu için javascript öğrenmeye çalıstım ama kaynaklar yetersiz geldi sonunda jquery başladık, senide bulduk zaten öncedende takip ediyordum seni, Allah işini rast getirsin 🙂

  2. Merhabalar bir sorum olacaktı. 'JSON çıktısı almak isteseydik..' diye başlayan kısımda, 'cevap' sunucudan dönen değer oluyor anladığım kadarıyla peki 'hata' nedir? Nerden geliyor?

  3. @Kenan Yıldız, php kısmına şöyle bir kod yazdık;

    $array["hata"] = "Boş alan bırakmayın!";

    Tam olarak buradan geliyor 🙂

  4. Merhaba;

    ajax ile yaptığım bir uygulamada sorguladığım adres kendi dizinimdeyse sorun olmuyor fakat farklı bir sunucudaki bir sayfayı sorgıladığımda hata alıyorum bunun sebebi ne olabilir.

    bu şekilde çalışıyor
    $.post("ticketlist.asp",{"q":q},function(veri){

    fakat adres olarak farklı bir yeri gösterdiğimde sorun yaşıyorum
    $.post("http://10.21.21.10/ticket/ticketlist.asp&quot;,{"q":q},fu

    nction(veri){

    Jquery ajax ile uzak bir sunucudaki bir bilgiyi çekebilirmiyiz?

    $.post("http://10.21.21.10/ticket/ticketlist.asp&quot;,{"q":q},fu

    nction(veri){
    bu şekilde yaptığımda çalışmıyor

  5. Herkese izin vermen gerekebilir.. PHP'de şu şekilde yapılıyor;

    header("access-control-allow-origin: *");

    Ancak asp'de nasıl yapılıyor bir fikrim yok hocam.

  6. tayfun hocam. 3 farklı bilgisayarda denememe rağmen ve sizin yazdığınız kodların birebir aynısını yazmama rağmen post metodu ile veri alışverişi yapamıyorum. sizce sebebi ne olabilir?

    1. f12 ye basıp geliştirici aracını açın. console bölümüne bir bakın hata alıyor musunuz? ve network bölümüne bakın, istek gerçekleşiyor mu diye.

  7. tayfun hocam şöyle bir uyarı geliyor console bolumunde;

    event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.7.2.min.js:3
    XMLHttpRequest cannot load file:///C:/Users/omar/Desktop/jquery%20%C3%A7al%C4%B1%C5%9Fmalar/ajax%20metodu/ajax.php. Received an invalid response. Origin ‘null’ is therefore not allowed access.

  8. Seni çok tebrik ediyorum, ne arasam seni buluyorum. Çok faydalı oluyorsun. Allah işini gücünü rast getirsin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir