WhoSayIn

Merhaba,

Bu yazımızda JQuery kütüphanesini kullanarak örnek bir Ajax uygulaması oluşturacağız. Uygulamadan özetle bahsedecek olursak formdaki 2 adet inputa girilen sayıları toplama işlemine tabi tutuyor. İhtiyacımız olanlar bir adet JQuery kütüphanesi ;) Buradan indirebilirsiniz. Dosyamızı indirdik, şimdi form.html adında yeni bir html sayfası oluşturup kütüphaneyi sayfamıza dahil etmeliyiz, bunu da şu şekilde yapıyoruz;

<script type="text/javascript" src="jquery.min.js"></script>

Artık sayfamızda JQuery nin tüm olanaklarını kullanabiliriz. Şimdi hemen örnek ajax uygulamamızı yapmaya başlıyoruz, bir adet fonksiyon oluşturuyoruz, bu fonksiyon formumuzu ajax.php sayfasına ajaxla post edecek ve ajax.php den dönen veriyi de "sonuc" adlı div in içerisinde gösterecek;

<script type="text/javascript">
function ajax() {
$.ajax({
	type: "POST",
	url: "ajax.php",
	data: $('form#hesapform').serialize(),
	success: function(ajaxcevap){
		$('#sonuc').html(ajaxcevap + '<br />').slideDown('slow');
 }
 });
}
</script>

Sayfamıza bir adet form ekliyoruz, fonksiyon bu formdaki bilgileri ajax.php ye post ediyor;

<form id="hesapform" name="hesapform">

	<label for="s1">Sayı 1</label>
	<input id="s1" name="s1"><br />

	<label for="s2">Sayı 2</label>
	<input id="s2" name="s2"><br />

	<label for="topla"></label>
	<input id="topla" name="topla" value="Sayıları Topla" type="button" onclick="javascript:ajax();">
</form>

<div id="sonuc"></div>

Gördüğümüz gibi "Yolla" adındaki butonun onclick eventinde daha önce yazdığımız fonksiyonu çağırıyoruz ve formu ajaxla post etmiş oluyoruz. Bir de "sonuc" adında boş bir div oluşturduk, sonucu bu div in içerisinde göstereceğiz. html sayfamız şimdilik bitti, şimdi ajax.php sayfamıza geçiyoruz, burda formdan gelen verileri toplama işlemine tabi tutacağız ve sonucu göstereceğiz; ajax.php adında bir php sayfası oluşturuyoruz, içeriği şöyle;

<?
	$s1 = $_POST['s1'];
	$s2 = $_POST['s2'];
	
	if ((!($s1==""))or(!($s2==""))) {
		$sonuc = $s1 + $s2;
		echo $sonuc;
	}	
?>

Özetle ne yaptığımızı anlatalım, $s1 ve $s2 adında 2 değişken oluşturuyoruz ve formdan gelen verileri bu değişkenlere atıyoruz. daha sonra bu verilerden herhangi birisinin boş olup olmadığını kontrol ediyoruz, eğer ikisi de doluysa bu 2 sayıyı toplayıp sonucu $sonuc değişkenine atıyoruz ve echo komutuyla sayfaya basıyoruz.

Uygulamanın çalışır haline burdan ulaşabilirsiniz.

Bir dahaki yazımızda görüşmek üzere, hoşçakalın,..