JQuery ile Form Verileri Gönderme
Hepinize merhaba dostlarım :). Bu yazımda sizlere web sitelerinde hemen hemen kullanılan ve geliştiricilerin neredeyse vazgeçilmez dediği jquery ile form gönderme olayı yani basit bir tabirle sayfa yenilenmeden form gönderme olayından bahsedeceğim ve bir örnek yapacağız :). Aklınızda ufak bir soru oluşmuştur sayfa yenilenmeden form mu gönderilir diye :). Bunun cevabı Evet :). Ama önce Jquery nedir gelin ufakça buna göz atalım
JQuery Nedir ?
Dostlarım jquery kütüphanesi javascript için oluşturulmuş ve belirttiğimiz sayfalara GET ve POST üzerinden veri göndermemiz dışında her zaman kullanılır. Örneğin bir metin editörünü çalıştırmak için bile jquery kullanılır :). O halde neden duruyoruz hadi kullanmaya başlayalım dediğinizi duyuyorum. Haydi başlayalım o zaman
Dostlarım öncelikle
https://jquery.com/
sitesine ilerleyip Download kısmından jquery dosyalarını indirelim dostlarım. Daha sonra sayfamıza aşağıdaki örnekteki gibi dahil edelim
<script src="/jquery/jquery.min.js"></script>Daha sonra form sayfamızı oluşturalım
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery Veri Gönderme | MFSoftware Blog</title>
</head>
<body>
<form id="iletisim">
<label for="">İsim</label>
<input type="text" id="isim">
<br>
<label for="">E-Posta</label>
<input type="text" id="eposta">
<br>
<label for="">Konu</label>
<input type="text" id="konu">
<br>
<label for="">Mesaj</label>
<textarea id="mesaj"></textarea>
<br>
<button type="button" class="formgonder">Gönder</button>
</form>
</body>
</html>Evet dostlarım form sayfamızın kodlarını yazdık. Örnek olarak da bir islem.php dosyası oluşturalım. Şimdi gelelim jquery kodlarını yazmaya
<script>
$(".formgonder").click(function(){
var isim = $("#iletisim #isim").val();
var eposta = $("#iletisim #eposta").val();
var konu = $("#iletisim #konu").val();
var mesaj = $("#iletisim #mesaj").val();
$.ajax({
url: "islem.php", // nereye gidecekse orayı yazdık
type: "POST", // POST tipinde veri gönderelim dedik bu GET de olabilir gereksinime bağlı
data: {
isim: isim, // isim isimli değişkene isim değerini koyduk
eposta: eposta, // eposta isimli değişkene eposta değerini koyduk
konu: konu, // konu isimli değişkene konu değerini koyduk
mesaj: mesaj // mesaj isimli değişkene mesaj değerini koyduk
iletisim : 1 // iletisim verisi gitmesi kontorlü (isteğe bağlı olarak yazdım)
},
success: function (res) {
// gönderilme işlemi başarılı ise
alert(res); // verilerin kontrolünü yapalım (ekranda yazdıralım)
$("#iletisim #isim").val(""); // isim inputunu boşaltalım
$("#iletisim #eposta").val(""); // eposta inputunu boşaltalım
$("#iletisim #konu").val(""); // konu inputunu boşaltalım
$("#iletisim #mesaj").val(""); // mesaj inputunu boşaltalım
}
});
});
</script>Dostlarım burada bazı kısımlar akla takılmış bulunmaktadır :). Gelin hızlıca onları açıklayalım
- url : JQuery ile göndereceğimiz dosyalar hangi yere gidecekse onun adresini veya yolunu yazacağız
- type : Verilerimiz GET ile mi yoksa POST ile mi gidecek onun kontrolüdür
- data : Belirttiğimiz dosyaya gidecek olan verilerimiz
- success : Veri başarılı bir şekilde gönderilmiş ise ne yapılacağını yazabiliriiz. Ben örnek olarak inputları temizlesin dedim :)
Şimdi bu kısma kadar sorun yoksa dostlarım gelin islem.php içerisini hazırlayalım
<?php
// iletisim datası gelmiş ise
if(isset($_POST['iletisim'])){
$isim = $_POST['isim']; // isim datasını aldık
$email = $_POST['eposta']; // email datasını aldık
$konu = $_POST['konu']; // konu datasını aldık
$mesaj = $_POST['mesaj']; // mesaj datasını aldık
// verileri kontrol ettirelim
if($isim=="" || $email=="" || $konu=="" || $mesaj==""){
// veriler boş ise
echo "Veriler Boş Geliyor Usta";
}else{
// veriler boş değil ise
print_r($_POST);
}
}
?>Bu şekilde kodlarımızı yazalım dostlarım. Eğer boş bir veri gönderirsek karşımıza "Veriler Boş Geliyor Usta" yazısı yazacaktır. Ama eğer veriler dolu gelirse
Array => {
[isim] => "(Input Üzerinden Gönderdiğiniz İsim)",
[eposta] => "(Input Üzerinden Gönderdiğiniz E-Posta)"
[konu] => "(Input Üzerinden Gönderdiğiniz Konu)"
[mesaj] => "(Input Üzerinden Gönderdiğiniz Mesaj)"
}Şeklinde ekranımızda mesaj belirecektir. Neden düz bir şekilde değil de bu şekilde geldi diye soruyorsanız dostlarım bizim islem.php dosyasına POST ile gelen verileri ayrıştırmıştık ya :) Daha sonra eğer veriler dolu geliyorsa print_r() ile posttan gelen tüm verileri ekrana bastırmasını istemiştik. İşte dostlarım POST ile gele veriler de bir dizi olduğu için ve print_r() komutu da diziyi ekrana bastırmaya yaradığı için bu şekilde bir mesaj ekrana basılacaktır :).
Evet dostlarım bu yazımda jquery ile form verilerini diğer sayfaya göndermeyi elimden geldiğince anlatmaya çalıştım. Umarım faydalı olabilmişimdir :). Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer