jQuery serialize ve serializeArray fonksiyonları

geri

Bu yazıda jQuery ile serileştirme (serialize) olaylarına değineceğim. Serileştirme, bir grup form elemanın elemanAdi ve içindeki değer olarak bir string haline yada dizi (array) haline getirilmesine diyoruz. Bu yöntem özellikle ajax ile veritabanı işlemleri yaparken kullanılıyor.

İçinde 10 tane form elemanı olan bir form düşünelim, bu formu ajax kullanarak veritabanına yazmamız gerektiğinde her form elemanı için tanımlama yapmamız gerekir, işte serileştirme bu noktada işimize yarıyor, $("form").serialize(); dediğimizde otomatik olarak form serileştiriliyor ve istediğimiz gibi kullanabiliyoruz. Form serileştiğinde alan1=1&alan2=2&alan3=3&select1=test1 haline geliyor.

jQuery serileştirme işini dizi şeklinde de yapabiliyor. Serileştirme sonucunda oluşan veri yapısı şu şekilde oluyor;

[js] [ { name: "a", value: "1" }, { name: "b", value: "2" }, { name: "c", value: "3" }, { name: "d", value: "4" }, { name: "e", value: "5" } ] [/js]

Görüldüğü üzere çıktımız jSon data şeklinde oluyor. Bu sayede veriyi çok kolay bir şekilde işleyebiliyoruz. Kullanımı ise $("form").serializeArray(); şeklinde.

Her iki yönetimi form elementi kullanmadan diğer html elementleri içinede uygulamamız mümkün. Ekstradan yapmamız gereken tek şey * karakterini kullanarak element içindeki tüm elemanları belirtmek. Yani $("div *").serialize() gibi.. diyelim ki formumuz daki sadece input elementlerini serileştirmek istiyoruz bu seferde seçicimize sadece input ibaresini ekliyoruz $("div input").serialize()

[html]

$("div.seri button").click(function(){ var seriForm = $("div.seri *").serialize(); $(this).parent().find("span").text(seriForm); });

$("div.seriArray button").click(function(){ var seriForm = $("div.seriArray *").serializeArray(); var t = $(this).parent().find("span"); t.empty();

$.each(seriForm, function(i,item){ t.append(item.name +"="+ item.value); }); });

})

// ]]>

Form Serileştirme

Div Serileştirme

Div Array olarak Serileştirme

[/html]

Serileştirme, çok zahmetli işleri kolayca ve hızlı bir şekilde yapmamıza olanak sağlıyor ;) Örneklerin çalışır haline buradan bakabilirsiniz.

2011-08-17 | jquery