Web sitelerinde normal olarak tarayıcı ile sunucu arasında veri aktarımı yapılması esnasında sayfanın yenilenmesi gerekli olmasına rağmen AJAX ile veri gönderme yöntemiyle bu durum ortadan kalkıyor ve sayfa yenilemeden veri alışverişi sağlanabiliyor. İşte bu işlemi jquery ajax kullanımı ile nasıl yapabileceğimizi ayrıntılı ve basit bir şekilde göreceğiz.
Sunucuya veri gönderimi sırasında form kullanılmadığı zaman verileri javascript ile teker teker alıp jquery ajax kullanımı ile post edebiliriz. Form kullanıldığı durumda da teker teker veriler elde edilebilir ancak buna gerek yok. Form bilgilerini aynı PHP tarafında olduğu gibi tek seferde elde edebilir, sayfa yenilenmeden ajax post işlemi ile verileri aktarabiliriz.
Bu yazıda HTML form elemanlarına girilen değerleri 2 farklı yöntemle nasıl post edilebileceğini ve PHP tarafında bu verilerin alınıp gerekli işlemlerin yapılması sürecini göreceksiniz. Bu yöntemlerden birisi olan ‘formdata’ kullanarak form bilgilerini post etme işlemi ile hem form bilgileri post edilecek hem de eklenti kullanmadan file upload yapılabilecek. Post edilen veriler PHP tarafında elde edilecek ve dosya seçildiyse bu dosyanın yüklenmesi sağlanacak.
Diğer yöntem ise ‘serialize’ ile form bilgilerini elde edip jquery ajax kullanımı ile post etme yöntemi. Bu yöntemde de form bilgileri ajax ile post edilebiliyor ancak file upload desteği bulunmuyor.
Ayrıca sayfa yenilenmeden ve HTML’de form kullanılmasına gerek duyulmadan, eklentisiz bir şekilde ajax ile dosya yükleme yapılabilir. Bunun için sitemdeki jquery dosya yükleme konulu yazıma göz atabilirsiniz.
Bu arada bir dipnot geçmek istiyorum. Jquery çok bilinen bir javascript kütüphanesi. Az kod ile çok daha fazla iş yapabilmemizi sağlayan bu kütüphane ile ajax kullanımı daha pratik bir hal alıyor. Ancak jquery olmaksızın AJAX kullanabilmek istiyorsanız veya AJAX nedir, sayfa yenilenmeden veri gönderilmesini sağlayan bu yöntemin temelinde neler var gibi aklınızdan sorular geçiyorsa javascript ajax kullanımı konulu yazıma göz atabilirsiniz.
İlk olarak sade bir şekilde jquery ajax ile post etme işleminin nasıl yapılacağını görelim, ardından form bilgilerini post etme yöntemlerine bakalım.
Jquery Ajax Post Kullanımı
Jquery ile ajax post işlemi en yaygın olarak $.ajax() fonksiyonu ve $.post() fonksiyonu ile yapılmakta. Her iki yöntem de aynı kapıya çıkar. İki yöntemi de en sade halleriyle aşağıda görebilirsiniz.
Jquery $.ajax() Fonksiyonu ile Post İşlemi
Veri göndermeden post işlemi yapmak istiyorsanız ‘data’ özelliğini kaldırmanız gerekir. Başka bir sayfaya değil de aynı sayfaya post işlemi yapmak istiyorsanız ‘url’ özelliğini boş bırakın yada tamamen kaldırın.
$.ajax({
url: "ajax.php",
type: "POST",
data: {veri1: "birinci veri", veri2: "ikinci veri"},
success: function(data) {
alert(data); //post islemi basarili ise post edilen sayfadan geri donen verileri alert ile ekrana yaz
}
});Jquery $.post() Fonksiyonu ile Post İşlemi
$.post("ajax.php", {veri1: "birinci veri", veri2: "ikinci veri"}, function (data){
alert(data);
});Şimdi jquery ajax post kullanımı ile form post etme işlemlerinin nasıl yapıldığına bakalım. Ayrıca burada anlatılan uygulamanın çalışır halini sayfanın en altında vereceğim linkten indirebilirsiniz.
Jquery Formdata ile Form Bilgilerini Post Etme
Ajax ile veri gönderme formdata ile oldukça kolay. PHP ile html etiketlerinde değişen bir şey yok. Sadece gerekli javascript kodunun eklenmesiyle post yöntemi sayfa yenilenmeden yapılmış olacak.
Formdaki post etme butonuna tıklanıldığında javascript tarafında formun post edilip sayfanın yenilenmesini engelliyoruz. Ardından formdata tekniğiyle formdaki bilgileri çekip ajax ile veri gönderme işlemini post yöntemiyle yapıyoruz. Örnekte PHP tarafından alınan bilgiler, alındığını teyit etme maksadıyla post eden ana sayfaya geri gönderiliyor ve javascript ile ‘console.log()’ fonksiyonu kullanarak console ekranına veriler yazdırılıyor. Dosya seçilir ise belirtilen dizin içerisine dosya veya dosyalar kaydediliyor.
Ajax ile post etme kodları aşağıdaki gibidir.
HTML Kodu
JS Kodu
$(document).on("submit", "#infoForm", function(event){ //infoForm id li form post edildiğinde
event.preventDefault();
$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData(this),
dataType: "json",
contentType: false,
cache: false,
processData:false,
success: function(data) {
alert(data["result"]); //post sonucunu yazdir
console.log(data['data']); //girilen verileri console ekranina yazdır
}
});
});PHP Kodu (Tekli Dosya Yükleme)
Tekli dosya yüklemesi yapar. Birden fazla dosyayı yüklemez.
if ($_POST){ //sayfa post edildiyse
$dizi['result'] = 'Post Edildi. Veriler console ekranına yazdırıldı';
if(isset($_FILES['files']['name'])){ //files isminde bir input file üzerinden veri gönderildiyse
if($_FILES['files']['size'] < 2000000){ //dosya boyutu 2 mb boyutundan az ise
$extension_array = array('png','jpg','gif','txt');
$extension = pathinfo($_FILES['files']['name'])['extension']; //dosya uzantisini al
if (in_array($extension,$extension_array)){ //dosya uzantisi $extension_array dizisinde var mı, uzantı uygun mu
$user_photo = $_FILES['files']['name']; //dosya ismini al
$upload_status = move_uploaded_file($_FILES['files']['tmp_name'], 'files/'.$user_photo); //dosyayı files klasörüne orjinal ismi ile kaydet
if ($upload_status){ //yukleme basarili ise
$file_result = 'Basarili';
}else{
$file_result = 'Dosya yüklenirken bir sorun oluştu';
}
}else{
$file_result = 'Uzantı png, jpg, gif veya txt olmalıdır';
}
}else{
$file_result = 'Dosya boyutu 2 mb dan yuksek';
}
$dizi['result'] .= ' - Dosya Yukleme Durumu: '.$file_result;
}
$dizi['data'] = $_POST;
echo json_encode($dizi);
}Çoklu seçim olmaksızın tek dosya seçimine imkan verilmesi için HTML tarafında input file elemanı aşağıdaki gibi kullanılmalıdır.
PHP Kodu (Multiple File Upload)
Aşağıdaki kodlar ile birden fazla dosyayı yükleyebilirsiniz.
if ($_POST){ //sayfa post edildiyse
$dizi['result'] = 'Post Edildi. Veriler console ekranına yazdırıldı';
//Multiple File Upload
if(isset($_FILES['files']['name'])){ //files isminde bir input file üzerinden veri gönderildiyse
$file_count=count($_FILES['files']['name']);
for($i=0;$i<$file_count; ++$i){
if($_FILES['files']['size'][$i] < 2000000){ //dosya boyutu 2 mb boyutundan az ise
$extension_array = array('png','jpg','gif','txt');
$extension = pathinfo($_FILES['files']['name'][$i])['extension']; //dosya uzantisini al
if (in_array($extension,$extension_array)){ //dosya uzantisi $extension_array dizisinde var mı, uzantı uygun mu
$user_photo = $_FILES['files']['name'][$i]; //dosya ismini al
$upload_status = move_uploaded_file($_FILES['files']['tmp_name'][$i], 'files/'.$user_photo); //dosyayı files klasörüne orjinal ismi ile kaydet
if ($upload_status){ //yukleme basarili ise
$file_result = 'Basarili';
}else{
$file_result = 'Dosya yüklenirken bir sorun oluştu';
}
}else{
$file_result = 'Uzantı png, jpg, gif veya txt olmalıdır';
}
}else{
$file_result = 'Dosya boyutu 2 mb dan yuksek';
}
}
$dizi['result'] .= ' - Dosya Yukleme Durumu: '.$file_result;
}
$dizi['data'] = $_POST;
echo json_encode($dizi);
}
Birden fazla dosya seçiminin aktif olabilmesi için HTML tarafında input file elemanı aşağıdaki gibi olmalıdır.
Jquery Serialize ile Form Bilgilerini Post Etme
HTML ve PHP tarafında bir değişiklik yapılmasına gerek yok. Javascript tarafında ufak bir değişiklik ile serialize yöntemi ile form post etme işlemini gerçekleştirebiliriz. Bu yöntemde file upload çalışmayacaktır.
$(document).on("submit", "#infoForm", function(event){
event.preventDefault();
var serialized = $(this).serialize();
if(serialized.indexOf('=&') > -1 || serialized.substr(serialized.length - 1) == '='){ //formda boş yer var ise
alert("Boş yer bırakmayın");
}else{
$.ajax({
url: "ajax.php",
type: "POST",
data: serialized,
dataType: "json",
success: function(data) {
alert(data["result"]); //post sonucunu yazdir
console.log(data['data']); //girilen verileri console ekranina yazdır
}
});
}
});
PHP ve jquery ajax post kullanımı konusu genel itibarıyla bu şekilde. Bu yazıda anlatılan konuların çalışır haldeki örneğini JqueryAjaxForm adlı dosyayı indirerek ulaşabilirsiniz.
0 Yorum yapan