Etiket arşivi: form

jQuery ile Form Serialize Fonksiyonu

Published / by Uğur Özşahin / Leave a Comment

jQuery yeni yeni öğrenmeye başladığım bir framework. jQuery nin tam olarak ne olduğundan bahsedecek olursak kısaca, en çok kullanılan belli başlı ajax fonksiyonlarını içinde barındıran bir kütüphane olduğunu söylemek yanlış olmayacaktır sanırım. Ajax ile çok uzun zaman önce tanışmama ve küçük çaplı uygulamalar yazmama rağmen hiç bir zaman yeterince özen göstermediğimin farkına bir kaç gün önce vardım. Küçük bir araştırma sonucu kullanışlı olabiliceğini düşündüğüm bir framework ile karşılaştım (jQuery). Browser farklılıklarından kaynaklanan sorunlar yüzünden javascript dilini bir türlü sevememiştim. Fakat Ajax ’ ın kullanışlılığının ve kolaylığının da tartışılmaz olduğunu düşünenlerdenim. Dolayısı ile browser farklılıklarından dolayı çıkabilecek sorunlarla karşı karşıya kalmak istemiyor ve bir an önce kullanışlı ajax uygulamaları geliştirmek istiyorsanız eğer, bu framework çok işinize yarayabilir.

Yeni öğrenmeye ve uygulamaya başladığım jQuery de, başlar başlamaz karşılaştığım en önemli sorunu ve çözümünü de burada paylaşmaya karar verdim. Ajax ile ilgilenenler bileceklerdir. Prototype.js kütüphanesinin kullanışlı fonksiyonlarından biri olan serialize(), jQuery de de karşımıza çıkmakta. Fakat sorun bu fonksiyonu, sayfalarımızda kullandığımız formları javascript ile sunucuya gönderirken prototype ’ taki kadar kolay kullanamamamız. İşte bu sorunun çözümünü (aslında pek sorun sayılmaz) yazının devamında okuyabilirsiniz.

Öncelikle jQuery Framework ü buradan indirebilirsiniz. İki farklı sürümünün olduğunu belirtmeliyim. Birisi sıkıştırılmış sürüm ki uygulamalarınızı yazarken bu sürümünü kullanmanızı öneririm. Diğer sürüm ise sıkıştırılmamış sürümüdür. Bu sürümde kodları rahatlıkla okuyabilir, değiştirebilir ve kullanabilirsiniz. Ancak kişisel uygulamalarınızda ilk sayfa yüklemelerinin biraz daha uzun sürmesine neden olabileceğini unutmamalısınız.

jQuery nin farkına vardığımda ülkemizde de jQuery ile ilgilenen birçok insan olduğunu ve bir mail grubu oluşturduklarını öğrendim, hemen üye oldum. Hatta bahsettiğim sorunu orada da paylaştım. Her şeye rağmen grup üye sayısının çok fazla olmaması dolayısı ile geçici olarak yeterli dayanışmayı sağlayamadık. Sonunda sorunu kendi yöntemlerimle çözdüm ve aşağıda örneği ile birlikte açıklıyorum.

Önce yapmak istediğim şeyin ne olduğunu belirteyim, amacım herhangi bir sayfada kullanılacak olan bir form oluşturmak ve formdaki verileri istediğim yere submit ettikten sonra sonucu formun olduğu sayfaya yansıtmak.

İstediğim bilgileri get metodu ile gönderebilmek için aşağıdaki javascript koduna ihtiyacımız var.


<script type=”text/javascript”>
$(document).ready(function(){
$(’#jq’).submit(function() {
var form = jQuery(’#jq’);
q = form.formSerialize();
$.ajax({
type: “GET”,
url: “jquery_form.asp”,
data: q,
success: function(cevap) { $(“#icerik”).html(cevap); },
dataType: “html”
});
});
});
</script>

Burada bilinmesi gereken önemli fark, serialize fonksiyonunu prototype.js de Form.serialize() şeklinde çağırarak direk sonuç alabilmemize rağmen jQuery de bu işlemi bir plugin yardımı ile yapabiliyorsunuz. jQuery için yazılmış bu plugini uygulamamıza ekledikten sonra içerisinde bulunan formSerialize() fonksiyonunu kullanıyoruz. jQuery Form plugini ni fazla inceleme fırsatım olmadığı için şu an tam olarak yorum yapamıyorum. Sonraki yazılarımda bu pluginden daha ayrıntılı bahsetmeyi düşünüyorum. Bu jQuery Form Plugin inini buradan indirebilirsiniz.

Yukarıda ki koddan biraz bahsedecek olursak, “jq” id sine sahip formumuzun submit fonksiyonunda; formu jquery_form.asp sayfasına get metodu ile subbmit etmesini ve jquery_form.asp sayfasından dönen verinin, sayfamızda bulunan “icerik” id li div tagına yazılmasını sağlıyoruz.

Bu fonksiyonun yararından bahsedecek olursak, öncelikle sayfalarınızda kullandığınız formlarda ziyaretçilerinizin daha fazla zaman kaybetmemelerini sağlayacaktır. Örnek olarak bir yorum uygulamasında kullanıcılarınız yeni bir sayfaya yönlendirilmeden aynı sayfa içerisinde çok hızlı bir şekilde yorum yapma fırsatı bulacaklardır. Hele bir de ajax uygulamalarının vazgeçilmezi loading (Yükleniyor) grafiklerini de kod içerisine dahil ederseniz çok zarif bir uygulama elde edebilirsiniz.

 

Aşağıdaki linkten de projeyi sorunsuz olarak indirebilir ve localhostta deneyebilirsiniz. İndirdikleriniz asp ile ve çok basit bir şekilde kodlanmıştır. Rahatlıkla Php yada başka bir dile dönüştürebilirsiniz.