Jquery ajax nasıl kullanılır, nerelerde kullanılabilir ve özellikleri nelerdir bu yazıda bulabilirsiniz.
Jquery sayesinde artık daha az ve daha basit kod yazarak istediğimiz bir çok şeyi hızlıca yapabiliyoruz. Javascript kütüphanesini bizlere rahatça kullanmamızı sağlayan Jquery ile ajax nasıl kullanılır ona bakalım.
Ajax'ı sayfayı yenilemek istemeyip bilgi alışverişi sağlaması yapabilirsiniz. Bir formdaki bilgileri gönderip sayfadan cevap alabilir, veya bir kişi sayfanıza girdiğiniz, herhangi bir alana tıkladığında veritabanına kayıt işlemlerini sayfayı yenilemeden yapabilirsiniz. Bu yazı da bir veya daha fazla bilgiyi POST methodu ile gönderip gelen sonucu değerlendirmeyi göstereceğim.
Öncelikle basit olarak kodumuza bakalım.
$.ajax(
{
type: "POST",
url: 'post_edecegimiz_dosya.php',
data: {gonderecegimiz_bilgi},
success: function (data)
{
//gelen sonuc
alert(data);
},
}
);
Örnekte bir ajax fonksiyonu açtık ve hangi bilgileri hangi adrese göndereceğimizi yazdık. Success fonksiyonu ile de gelen bilgiyi kullanacağız.
Şimdi farklı kullanımlara bakalım.
var bilgi = 'Doruk';
$.ajax(
{
type: "POST",
url: 'post_edecegimiz_dosya.php',
data: {bilgi},
success: function (data)
{
//gelen sonuc
alert(data);
},
}
);
//Yukarıdaki örnek ile bilgi adında bir değişkeni post_edecegimiz_dosya.php adresine gönderdik.
//Dosyaya bu değişken şu şekilde alabilirsiniz.
//$degisken = $_POST['bilgi'];
//echo $degisken
//Alert data ile gelen datayı yazdırdığımızda tekrar bize Doruk yazdıracaktır.
//PHP dosyamızda veriyi aldıktan sonra istediğimiz şekilde değerlendirebiliriz.
var bilgi = 'Merhaba';
var diger = 'Ben ajax ile yazıldım';
$.ajax(
{
type: "POST",
url: 'post_edecegimiz_dosya.php',
data: {bilgi,diger},
success: function (data)
{
//gelen sonuc
alert(data);
},
}
);
//Bu sefer iki farklı değişkeni aynı dosyaya gönderdik.
//Tekrar dosyada nasıl alacağımıza bakalım.
//$degisken = $_POST['bilgi'];
//$degisken2 = $_POST['diger'];
//echo $degisken.' '.$degisken2;
//Artık bize dönen sonuç "Merhaba ben ajax ile yazıldım" olackatır.
$.ajax(
{
type: "POST",
url: 'post_edecegimiz_dosya.php',
data: {bilgi: 'Doruk',diger: 'Ben ajax ile yazdıldım'},
success: function (data)
{
//gelen sonuc
alert(data);
},
}
);
//Bu örnekte POST edeceğimiz değişkenlerin isimlerini data bölümünde belirledik.
//Tekrar dosyada nasıl alacağımıza bakalım.
//$degisken = $_POST['bilgi'];
//$degisken2 = $_POST['diger'];
//echo $degisken.' '.$degisken2;
//Dönen sonuç tekrar Merhaba Ben ajax ile yazıldım olacaktır
Bir form yaratıp bu formdaki bilgileri ajax ile gönderelim. Örnek olara bu bir üyelik formu olabilir. Önce formumuzu oluşturalım
<!DOCTYPE html>
<head>
<title>Üyelik Formu</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<form id="uyelikForm" action="javascript:void(0);" class="">
<input type="text" name="isim" placeholder="İsim" />
<input type="text" name="soyisim" placeholder="Soyisim" />
<input type="password" name="sifre" />
<input type="submit" value="Gönder" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$("#uyelikForm").submit(function(e) {
$.ajax({
type: "POST",
url: 'uye_kaydet.php',
data: $("#uyelikForm").serialize(), // formdaki tüm bilgileri gönder.
success: function(data)
{
alert(data); // Gelen Cevap
}
});
e.preventDefault(); //Formun sayfa üzerinde gönderilmemesini sağlar
}
</script>
</body>
</html>
Formdaki bilgileri gönderdiğimize göre artık PHP dosyamızı oluşturabiliriz.
<?php
//Öncelikle POST ile bir değer gelip gelmediğine bakalım.
//Eğer gelmiyorsa izin yok yazdıralım.
if($_POST)
{
//Bir bilgi geldi ve artık formumuzdaki bilgileri alabiliriz.
$gelenisim = $_POST['isim'];
$gelensoyisim = $_POST['soyisim'];
$gelensifre = $_POST['sifre'];
//Artık formdan gelen bilgileri aldık.
//Buradan sonra bilgileri veritabanına bağlanarak girebilirsiniz.
//Bilgilerin girildiğini varsayalım ve sayfada göstermek üzere bir cevap gönderelim
if($bilgilergirildi == TRUE)
{
echo 'Üyeliğiniz başarıyla tamamlandı';
}else{
echo 'Bir sorun oluştu';
}
}else{
echo 'İzin yok';
}
Zaman zaman almamız gereken cevaplardan birden çok olabilir. Örnek olarak bir üyelik formu oluşturdunuz hem aynı zamanda bir durum cevabı göndermek istiyorsunuz. Örneğin başarılı veya tekrar deneyin, aynı zamanda da son kullanıcının ismini almanız gerekiyorsa bunun en kolay yolu JSON kullanmaktır.
Aynı formu tekrar yapalım bu sefer gelen veriyi JSON olarak alalım.
<!DOCTYPE html>
<head>
<title>Üyelik Formu</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<form id="uyelikForm" action="javascript:void(0);" class="">
<input type="text" name="isim" placeholder="İsim" />
<input type="text" name="soyisim" placeholder="Soyisim" />
<input type="password" name="sifre" />
<input type="submit" value="Gönder" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$("#uyelikForm").submit(function(e) {
$.ajax({
type: "POST",
url: 'uye_kaydet.php',
data: $("#uyelikForm").serialize(), // formdaki tüm bilgileri gönder.
success: function(data)
{
//gelen sonuçları gelensonuc adlı değişkene yüklüyoruz.
gelensonuc = jQuery.parseJSON(data);
alert("Gelen sonuç:" + gelensonuc.cevap);
alert("Gelen isim:" + gelensonuc.isim);
}
});
e.preventDefault(); //Formun sayfa üzerinde gönderilmemesini sağlar
}
</script>
</body>
</html>
<?php
//Öncelikle POST ile bir değer gelip gelmediğine bakalım.
//Eğer gelmiyorsa izin yok yazdıralım.
if($_POST)
{
//Bir bilgi geldi ve artık formumuzdaki bilgileri alabiliriz.
$gelenisim = $_POST['isim'];
$gelensoyisim = $_POST['soyisim'];
$gelensifre = $_POST['sifre'];
//Artık formdan gelen bilgileri aldık.
//Buradan sonra bilgileri veritabanına bağlanarak girebilirsiniz.
//Bilgilerin girildiğini varsayalım ve sayfada göstermek üzere bir cevap ile kişinin ismini gönderelim
if($bilgilergirildi == TRUE)
{
//Öncelikle bir array yapıyoruz.
$cevap = array(
"cevap" => "Üyelik Başarılı",
"isim" => $gelenisim
);
echo json_encode($cevap);
}else{
$cevap = array(
"cevap" => "Üyelik sırasında bir hata oluştu",
"isim" => $gelenisim
);
echo json_encode($cevap);
}
}else{
echo 'İzin yok';
}
Temel olarak bunları öğrendiğiniz de bir çok sorununuza yanıt olacaktır. Ajax'ın başlangıcı, hatası vs gibi yan yardımcılar da vardır. Detaylı bilgi için api sayfasını ziyaret edebilirsiniz.
Yardımcı değişkenleri kullanmak istemediğiniz zaman örnek olarak submit'e bastığında blocklama yapıp, işlem başarılı olarak döndüğünde o bloğu kaldırabilirsiniz.
Bloğu daha uzun süre tutmak içinde setTimeout fonksiyonu ile işlem yapılıyormuş gibi gösterebilirsiniz.
Aklınızda kalan soruları yorum bölümüne yazabilirsiniz. Jquery ajax çok işinize yarayacaktır.