Bugünkü yazımızda Ajax'ın bizlere sunmuş olduğu güzel bir özellikten yararlanarak, Ajax İle Sayfa Yenilemeden POST İşlemini göstereceğim. Bildiğiniz üzere form işlemlerinde method="" parametre değerimize POST veya GET methodlarını belirtiriz ve formumuz action="" kısmında belirttiğimiz adrese HTTP/S ile istek gönderir. Bu yazımızda Ajax İle Sayfa Yenilemeden POST İşlemini göstereceğiz.
# Post İşlemlerinde Ajax Kullanımı?
Ajax, sunucuya gelen herhangi bir isteği arka planda işleyerek çalışılan sayfayı tekrar yenilemeden, veriyi dinamik olarak ekrana getiren veya gönderen web geliştirme tekniğidir.
# Ajax İle Sayfa Yenilemeden POST İşlemi
Basit bir şekilde form verilerini ajax yardımıyla veri tabanı işlemleri yapacağımız adrese POST edelim.
index.php
<body>
<form id="add" method="post">
Title: <input type="text" name="title" id="title" />
Description: <input type="text" name="description" id="description" />
<input type="submit" value="Add" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "ajax.php",
data: $(this).serialize(), // Formda'ki tüm verileri gönderir.
dataType: "json",
success: function (response) {
if (response.type === "success") {
alert(response.text);
}
if (response.type === "error") {
alert(response.text);
}
},
error: function(e) {
// Bu kısım axaj.php'de bir hata varsa çalışır.
alert("Beklenmedik bir hata oluştu");
}
});
});
</script>
</body>
Şimdiyse post edilen verileri alalım ve kontrol edelim, işlem sonucuna göre hata mesajı döndürelim.
ajax.php
<?php
if ($_POST["title"] && $_POST["description"]) {
$status = ['type' => 'success', 'text' => 'Başarılı'];
echo json_encode($status);
} else{
$status = ['type' => 'error', 'text' => 'Boş alan bırakmayın!'];
echo json_encode($status);
}
?>
Yorumlar (0)