Ajax İle Sayfa Yenilemeden POST İşlemi

Bildiğiniz üzere normal şartlarda form işlemlerinde POST ya da GET kullandığımızda sayfamız formun action kısmında belirttiğimiz sayfaya yönlenir. Ajax’ın bize sunduğu belkide en güzel nimetlerden biri de sayfa yenilemeden işlem yapmamızı sağlamasıdır. Bunu bir örnekle pekiştirelim.

index.php dosyası

<html>
<head>
	<meta charset="UTF-8" />
	<title>Ajax Post</title>
</head>
<body>
	<form id="gonderilenform">
		<input type="text" name="gidenveri1">
		<input type="text" name="gidenveri2">
		<input id="buton" type="button" value="GÖNDER"/>
	</form>
		<div></div>
</body>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(document).ready(function(){
	$("#buton").on("click", function(){ // buton idli elemana tıklandığında
		var gonderilenform = $("#gonderilenform").serialize(); // idsi gonderilenform olan formun içindeki tüm elemanları serileştirdi ve gonderilenform adlı değişken oluşturarak içine attı
		
		$.ajax({
			url:'ajax.php', // serileştirilen değerleri ajax.php dosyasına
			type:'POST', // post metodu ile 
			data:gonderilenform, // yukarıda serileştirdiğimiz gonderilenform değişkeni 
			success:function(e){ // gonderme işlemi başarılı ise e değişkeni ile gelen değerleri aldı
				$("div").html("").html(e); // div elemanını her gönderme işleminde boşalttı ve gelen verileri içine attı
			}
		});
		
	});
});
</script>
</html>

<html>

<head>

</head>

<body>

</form>

</body>

$(document).ready(function(){

$("#buton").on("click", function(){ // buton idli elemana tıklandığında

var gonderilenform = $("#gonderilenform").serialize(); // idsi gonderilenform olan formun içindeki tüm elemanları serileştirdi ve gonderilenform adlı değişken oluşturarak içine attı

$.ajax({

url:'ajax.php', // serileştirilen değerleri ajax.php dosyasına

type:'POST', // post metodu ile

data:gonderilenform, // yukarıda serileştirdiğimiz gonderilenform değişkeni

success:function(e){ // gonderme işlemi başarılı ise e değişkeni ile gelen değerleri aldı

$("div").html("").html(e); // div elemanını her gönderme işleminde boşalttı ve gelen verileri içine attı

}

});

</script>

</html>

ajax.php dosyası

<?php 
extract($_POST); // extract fonksiyonu ile değişkenleri gelen isimleriyle kullanılır hale getirdik ve aldık. 
	if($_POST){ // eğer post işlemi varsa
		echo "1. input : " . $gidenveri1 . "<br>2. input : " . $gidenveri2; // gelen verileri geri gönderdik.
	}
?>

<?php

extract($_POST); // extract fonksiyonu ile değişkenleri gelen isimleriyle kullanılır hale getirdik ve aldık.

if($_POST){ // eğer post işlemi varsa

echo "1. input : " . $gidenveri1 . "<br>2. input : " . $gidenveri2; // gelen verileri geri gönderdik.

}

İşte bu kadar. gördüğünüz gibi iki dosya ve bir kaç satır kodla sayfa yenilemeden güzel bir ajax işlemi yaptık. Tabi bu ajax işlemi en basit olanı.

Yukarıda kullandığım extract(), .on() ve .serialize() fonksiyonlarını da en kısa zamanda örneklerle açıklayacağım inşallah.

Bir de php ve ajax ile gelişmiş bir örnek yapmayı ve en kısa zamanda yayınlamayı düşünüyorum.

Bir sonraki yazıda görüşmek dileğiyle.

“Ajax İle Sayfa Yenilemeden POST İşlemi” üzerine 2 yorum

Haluk dedi ki:

20 Mart 2021, 11:42

Tüm bu işlemleri buton olmadan yapmak istiyorsak ne yapmalıyız? Örneğin 3 tane selectim var 1. Sinif 2. Ders 3. Ünite 4. Konu ve sinif secildiğinde sınıfın dersleri ders selectin içine gelsin aynı durum ders seçildiğinde konular listelensin gibi.

Cevapla
1. Şahin Çetinkaya dedi ki:
  
  18 Ağustos 2021, 22:26
  
  Merhaba, yukarıdaki kodun 17. satırındaki click yerine change olarak değişirsiniz. Örnek:
  $(“#buton”).on(“change”, function(){…
  
  Cevapla

Benzer Yazılar:

“Ajax İle Sayfa Yenilemeden POST İşlemi” üzerine 2 yorum

Bir cevap yazın Cevabı iptal et