Jquery ile Ajax Kullanımı
Jquery ajax nasıl kullanılır, nerelerde kullanılabilir ve özellikleri nelerdir bu yazıda bulabilirsiniz.
Jquery Ajax özelliğini nerelerde kullanabiliriz?
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.
Jquery Ajax Örneği
$.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.
Jquery Ajax bir değişken gönderme
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.
Jquery Ajax birden çok değişken gönderme
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.
Değişken isimlerini biz belirleyelim
$.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
Form Değişkenlerini Gönderelim
Bir form yaratıp bu formdaki bilgileri ajax ile gönderelim. Örnek olara bu bir üyelik formu olabilir. Önce formumuzu oluşturalım
Form Oluşturalım ve Bilgileri Gönderelim
<!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>
(html comment removed: Jquery yükleyelim )
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
(html comment removed: Ajax ile bilgileri gönderelim )
<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 ile kayıt yapalım
<?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';
}
PHP dosyasından Ajax için birden çok veri göndermek
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.
Ajax için JSON ile bilgi çekilmesi
<!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>
(html comment removed: Jquery yükleyelim )
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
(html comment removed: Ajax ile bilgileri gönderelim )
<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 ile JSON kullanımı
<?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 Jquery Ajax
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.