18. Gün - jQuery Dersi 18

Tayfun Erbilen ekledi. 5 Ekim 2012 Cuma

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 Gözat