jQuery $.post ile AJAX İşlemleri

Bu konu boş.

6 yanıt dizini görüntüleniyor

Yazar

Yazılar

9 Temmuz 2011: 08:49 #6742

oralunal

Ziyaretçi

Merhaba arkadaşlar,

Bugün sizlere herkesin çok merak ettiği AJAX işlemlerinden bahsediyorum. AJAX işlemlerimizi jQuery JavaScript kütüphanesi ile gerçekleştireceğiz. Öncelikle jQuery kütüphanesini buraya tıklayarak indirelim. Ben bu AJAX işlemlerini PHP ile anlatacağım, aynı mantıkla ASP ile de yapabilirsiniz.

Öncelikle index.html adlı bir dosya oluşturalım ve bu dosyanın içine aşağıdaki kodları ekleyelim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><br />
<meta name="author" content="trkodlama.com" /><br />
<br />
<title>PHP ile AJAX işlemleri</title><br />
<script src="js/jquery-1.6.2.min.js"></script> <!-- js isimli bir klasör oluşturup indirdiğimiz jQuery kütüphanesini içine klasörün içine attık --><br />
</head><br />
<br />
<body><br />
<br />
<h1>Bir Form Örneği</h1><br />
<p>Aşağıdaki örnek bir form örneği olacak. Butona tıkladığı anda islem.php sayfasına form bilgileri POST methodu ile gönderilecektir. Ordan gelen cevaba göre sayfada işlemler gerçekleştirilecektir.</p><br />
<form method="POST" id="girisFormu"><br />
<p>Kullanıcı Adınız: <input type="text" name="kullanici" /></p><br />
<p>Şifreniz: <input type="password" name="sifre" /></p><br />
<p><input type="button" id="jQueryTetikleyicisi" /></p><br />
</form><br />
<p id="sonuc">Butona tıkladığınız anda bu yazı değişecek islem.php sayfasından gelen cevap yazdırılacaktır.</p><br />
</body><br />
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />

<br />

<br />

<title>PHP ile AJAX işlemleri</title><br />

</head><br />

<br />

<br />

<h1>Bir Form Örneği</h1><br />

<p>Aşağıdaki örnek bir form örneği olacak. Butona tıkladığı anda islem.php sayfasına form bilgileri POST methodu ile gönderilecektir. Ordan gelen cevaba göre sayfada işlemler gerçekleştirilecektir.</p><br />

<p>Kullanıcı Adınız: <input type="text" name="kullanici" /></p><br />

<p>Şifreniz: <input type="password" name="sifre" /></p><br />

</form><br />

<p id="sonuc">Butona tıkladığınız anda bu yazı değişecek islem.php sayfasından gelen cevap yazdırılacaktır.</p><br />

</body><br />

</html>

Yukarıdaki kodda daha jQuery kodlarımızı eklemedik, o nedenle butona basmanız henüz birşeyi değiştirmeyecek. Fakat alanlarımızı gerekli bölümleri oluşturduk. Şimdi yapacağımız işlem çok basit. jQueryTetikleyicisi’ne yani butona tıkladığımız girisFormu formu serialize() fonksiyonu aracılığıyla düzenlenecek ve düzenlenmiş veriyi islem.php sayfasına göndereceğiz. Orada sanki normal bir PHP sayfaymış gibi $_POST ile gelen verileri işleyeceğiz. islem.php sayfasından bir yazı göndereceğiz ve o yazıyı sonuc isimli alana yazdıracağız. Ama ondan önce yarım kalan HTML sayfamızı tamamlayalım:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><br />
<meta name="author" content="trkodlama.com" /><br />
<br />
<title>PHP ile AJAX işlemleri</title><br />
<script src="js/jquery-1.6.2.min.js"></script> <!-- js isimli bir klasör oluşturup indirdiğimiz jQuery kütüphanesini içine klasörün içine attık --><br />
<script><br />
$(document).ready(function(){<br />
$("#jQueryTetikleyicisi").click(function(){<br />
var formData = $("#girisFormu").serialize();<br />
$.post("islem.php", formData, function(data){<br />
$("#sonuc").html(data);<br />
});<br />
});<br />
});<br />
</script><br />
</head><br />
<br />
<body><br />
<br />
<h1>Bir Form Örneği</h1><br />
<p>Aşağıdaki örnek bir form örneği olacak. Butona tıkladığı anda islem.php sayfasına form bilgileri POST methodu ile gönderilecektir. Ordan gelen cevaba göre sayfada işlemler gerçekleştirilecektir.</p><br />
<form method="POST" id="girisFormu"><br />
<p>Kullanıcı Adınız: <input type="text" name="kullanici" /></p><br />
<p>Şifreniz: <input type="password" name="sifre" /></p><br />
<p><input type="button" id="jQueryTetikleyicisi" /></p><br />
</form><br />
<p id="sonuc">Butona tıkladığınız anda bu yazı değişecek islem.php sayfasından gelen cevap yazdırılacaktır.</p><br />
</body><br />
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />

<br />

<br />

<title>PHP ile AJAX işlemleri</title><br />

$(document).ready(function(){<br />

$("#jQueryTetikleyicisi").click(function(){<br />

var formData = $("#girisFormu").serialize();<br />

$.post("islem.php", formData, function(data){<br />

$("#sonuc").html(data);<br />

});<br />

</script><br />

</head><br />

<br />

<br />

<h1>Bir Form Örneği</h1><br />

<p>Kullanıcı Adınız: <input type="text" name="kullanici" /></p><br />

<p>Şifreniz: <input type="password" name="sifre" /></p><br />

</form><br />

<p id="sonuc">Butona tıkladığınız anda bu yazı değişecek islem.php sayfasından gelen cevap yazdırılacaktır.</p><br />

</body><br />

</html>

Şimdi biraz da kullandığımız jQuery fonksiyonlarını anlatalım

$.post()
Yaptığı işlem çok basittir. Sizin belirttiğiniz sayfaya gider, eğer sayfaya post etmek istediğiniz veriler varsa onları da post eder ve isteğe bağlı olarak sayfadan gelen sonuçları alır. Biraz örnekleyelim:

$.post("deneme.php")

1	$.post("deneme.php")

Bu şekilde çalıştırırsanız deneme.php sayfasını arkaplanda açar ve çıkar. Herhangi bir veri post etmez. Sonuç döndürmez.

$.post("deneme.php", "site=trkodlama&#038;tld=com");

1	$.post("deneme.php", "site=trkodlama&tld=com");

Bu ise deneme.php sayfasına site ve tld parametrelerini post eder.

$.post("deneme.php", "site=trkodlama&#038;tld=com", function(data){<br />
alert(data);<br />
});

$.post("deneme.php", "site=trkodlama&tld=com", function(data){<br />

alert(data);<br />

});

Bu şekilde ise sayfadan gelen sonucu alert ile ekrana yazmamızı sağlar.

.serialize(): http://togl.me/323 adresinden detaylı bilgiye ulaşabilirsiniz

.click(): http://togl.me/c9 adresinden detaylı bilgiye ulaşabilirsiniz

.html(): http://togl.me/294 adresinden detaylı bilgiye ulaşabilirsiniz

Bu kadar açıklama yeterli olmuştur. Şimdi de islem.php sayfamızı yazalım:

/**
* @author trkodlama
* @copyright 2011
*/

$kullanici=trim($_POST[“kullanici”]);
$sifre=trim($_POST[“sifre”]);

if(strlen($kullanici)<4){
    echo “Kullanıcı adınız en az 4 karakter olmalıdır”;
}
elseif(strlen($sifre)<6){
    echo “Şifreniz en az 6 karakter olmalıdır”;
}
elseif($kullanici=“trkodlama.com” && $sifre=“ajax”){
    echo “Tebrikler başarı ile giriş yaptınız”;
}
else{
    echo “Hatalı kullanıcı adı veya şifre”;
}

?>
Burada yaptığımız işlemler basit, sayfadan gelen verileri kontrol ettik, ona göre bir cevap verdik. Siz burda mysql kullanarak kontrollerinizi yapacaksınız. Tek fark budur.

Download: Kaynak kodları buraya tıklayarak indirin

Sorularını yorum olarak yada forumdan iletebilirsiniz, kolay gelsin arkadaşlar[code=php:1fzv870j]
/**
* @author trkodlama
* @copyright 2011
*/

$kullanici=trim($_POST[“kullanici”]);
$sifre=trim($_POST[“sifre”]);

if(strlen($kullanici)<4){
    echo “Kullanıcı adınız en az 4 karakter olmalıdır”;
}
elseif(strlen($sifre)<6){
    echo “Şifreniz en az 6 karakter olmalıdır”;
}
elseif($kullanici=“trkodlama.com” && $sifre=“ajax”){
    echo “Tebrikler başarı ile giriş yaptınız”;
}
else{
    echo “Hatalı kullanıcı adı veya şifre”;
}

?>
Burada yaptığımız işlemler basit, sayfadan gelen verileri kontrol ettik, ona göre bir cevap verdik. Siz burda mysql kullanarak kontrollerinizi yapacaksınız. Tek fark budur.

Download: Kaynak kodları buraya tıklayarak indirin

Sorularını yorum olarak yada forumdan iletebilirsiniz, kolay gelsin arkadaşlar

8 Ağustos 2011: 12:46 #8891

Anonim
Ziyaretçi

Bu yöntem ile şunu yapabilirmiyim?
Benim bir formum var iki sayfadan oluşan ilk kısmıda il ilçe seçimi yaptırıyorum bu seçilen il ve ilçeleri diğer sayfadaki forumun içine taşıyabilirmiyim? bu şekilde beceremedim…

İyi açlışmalar.
8 Ağustos 2011: 13:04 #8892

Anonim
Ziyaretçi

İl ilçeye göre değişen verileriniz varsa evet yapabilirsiniz
8 Ağustos 2011: 14:29 #8893

Anonim
Ziyaretçi

@oralunal wrote:

İl ilçeye göre değişen verileriniz varsa evet yapabilirsiniz

Değişen veri derken ne demek istediğiniz tam olarak anlamadım kusura bakmayın. Her select için değişken tanımladım bunu demek istiyorsanız…
8 Ağustos 2011: 14:46 #8894

Anonim
Ziyaretçi

Evet tam olarak bunu demek istemiştim. İl ilçeden gelen veriyi islem.php sayfasına $.post ile POST edin ve ordan gelen sonucu sayfanıza yazdırın ;)
8 Ağustos 2011: 14:51 #8895

Anonim
Ziyaretçi

işlem yaptıracağım sayfa üzerinde

<br /> $sehir = trim($_POST["sehir"]);<br /> $ilce = trim($_POST["ilce"]);<br />

1
2
3
4

<br />
$sehir = trim($_POST["sehir"]);<br />
$ilce = trim($_POST["ilce"]);<br />

tanımlıyorum ve yazdıracağım yede ise şöyle kullanıyorum

<br /> <br />

1
2
3

<br />
<br />

işlem doğrumudur? Çünkü sehir ve ilçe tanımlamalarına tanımlanmamış olarak görüyor.
8 Ağustos 2011: 16:33 #8896

Anonim
Ziyaretçi

İşlem sayfasında ekrana yazdırdığın çıktıyı çekiyorsunuz aynen ;)

Yazar

Yazılar

6 yanıt dizini görüntüleniyor

Bu konuyu yanıtlamak için giriş yapmış olmalısınız.