JQuery Serialize Ve SerializeArray Fonksiyonları

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;

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

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()


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
            $(document).ready(function(){

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

                $("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);
                    });
                });

            })

// ]]></script>
</pre>
<form class="seri">
<h3>Form Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button>
 </form>
<div class="seri">
<h3>Div Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button></div>
<div class="seriArray">
<h3>Div Array olarak Serileştirme</h3>
 <input type="text" name="alan1" />
 <input type="text" name="alan2" />
 <input type="text" name="alan3" />
<select name="select1"> <option>test1</option></select>
<select name="select1"> <option>test2</option></select>
<select name="select1"> <option>test3</option></select>

 <button type="button">serileştir</button></div>
<pre>

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

Bunu paylaş: