Ajax ile Sayfa Yenilemeden Post İşlemi

Normalde post ya da get metotlarını kullanırken başka bir sayfaya yönlendirirsiniz ya da aynı sayfaya yönlendirip post ya da get ile veri gönderilmiş mi diye kontrol edersiniz. Sonuç olarak her iki yöntemde de sayfayı yeniden yükletiyorsunuz ve bunun yerine sayfa yenilenmeden işlem yaptırmak çok daha avantajlı gözüküyor. Ayrıca bazı yöntemler bir sayfada birden fazla form varsa kullanmanızda sorun yaratırken bu yöntemle hiç sorun yaşamadan istediğiniz kadar formu sayfa yenilenmeden post edebilirsiniz. Peki bunu nasıl yaparız?

Öncelikle dosyamızın <head> etiketleri arasına Jquery kütüphanemizi dahil edelim.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>

Ardından 2 adet formumuz olduğunu varsayalım ve formlarımızı ajax işlemine uygun olarak ayarlayalım.

<form id="frm">
<div class="col-12" style="text-align: center;">
<div id="sonuc"></div><br/>
</div>
<div class="group">
<label for="email" class="label">E-Mail</label>
<input name="email" id="email" type="text" class="input"/>
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input name="pass" id="pass" type="password" class="input" data-type="password"/>
</div>
<div class="group">
<input type="submit" id="btn" class="button" value="Giriş Yap">
</div>
</form>
<form id="forget-password-form">
<div class="col-12" style="text-align: center;">
<div id="sonuc2"></div><br/>
</div>
<div class="group">
<label for="email" class="label">E-Mail</label>
<input id="email" name="email" type="email" class="input"/>
</div>
<div class="group">
<input type="submit" id="buton" class="button" value="Şifreyi yenile"/>
</div>
</form>

Formlarımızı da hazırlık şimdi kütüphaneyi kullanacak ajax kodumuzu hazırlayalım:

<script type="text/javascript">
$(function(){
$("#btn").click(function(e){
e.preventDefault();
var veri= $("#frm").serialize();
$.ajax({
type:"post",
url:"operations/login.php",
data:veri,
success:function(sonuc){
$("#sonuc").html((sonuc));
}
});
});
$("#buton").click(function(e){
e.preventDefault();
var veri= $("#forget-password-form").serialize();
$.ajax({
type:"post",
url:"operations/forget-password.php",
data:veri,
success:function(sonuc){
$("#sonuc2").html((sonuc));
}
});
});
});
</script>

Artık formlarımızın post işlemlerini tamamladık. Şimdi de post ettiğimiz sayfalardan bir örnek göstereyim:

<?php
include("../connect.php");
if($_POST){
$email = addslashes(htmlspecialchars($_POST['email']));
$password = addslashes(htmlspecialchars($_POST['pass']));
if(!$email || !$password){
echo "Kullanıcı adı ve şifreyi doldurun";
}
else {
echo "İşlemler";
?>
<script type="text/javascript">
window.location="index.php";
</script>
<?php
}
}
?>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir