Főoldalra

jQuery Ajax serialize() és serializeArray()


AJAX kérésnél, serialize folytonos értékeket lehet használni, az URL lekérdezési karakterlánchoz.

serialize () metódus       Szérializáláskor a form értékekből, létrehoz egy URL kódolt szöveget.
										 
Szintaxisa:    $(selector).serialize();

serializeArray() metódus          Egy tömböt hoz létre, form értékek szerializálásáról (név és érték) formátumban.

Szintaxisa:   $(selector).serializeArray();

        $( selector ) meghatározással:  
            Kiválaszthatunk egy vagy több form adatelemet (például a bemeneti input / vagy szöveges terület), vagy a form (űrlap) összes elemét.
            A selektor = elem neve, vagy azonosítója ( Elemnév = form     vagy     "id" azonosító = "#teszt_urlap"







serialize() tesztelése.

Ez egy teszt űrlap.
Tetszőleges adatokat írhatunk be, hogy lássuk, mi történik Serialize hatására.

Vezetékneve:
Keresztneve:
Lakcíme:


Szérializált URL kódolt szöveg, itt fog megjelenni:



serialize() program leírása.

<head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
            $("#btn_slize").click(function(){
                     $("#slize_kiiratas").text($("#teszt_urlap").serialize());
            });
});
</script>
</head>

<body>
<p>Ez egy teszt űrlap.<br>Tetszőleges adatokat írhatunk be, hogy lássuk, mi történik Serialize hatására.</p> 
<hr>

   <form name="teszt_urlap" id="teszt_urlap" action="">
        Vezetékneve: <input type="text"  name="Vezetekneve"  id="Vezetekneve" size="32" value="Jquery"> <br>
        Keresztneve: <input type="text"  name="Keresztneve" id="Keresztneve" size="32" value="Serialize"> <br>
        Lakcíme:       <input type="text"  name="Lakcime" id="Lakcime" size="50" value="8000 jQuery Serialize utca 1355"> <br><br>
                            <input type="button"  id="btn_slize" value="Szérializálás. Katt ide!"><br>
    </form>
	
<hr>
<p>Szérializált URL kódolt szöveg, itt fog megjelenni:</p>
<div id="slize_kiiratas" style="font-size:14px;"></div>
<br>

<body>









serializeArray() tesztelése.

Ez egy teszt űrlap.
Tetszőleges adatokat írhatunk be, hogy lássuk, mi történik serializeArray() hatására.

Vezetékneve:
Keresztneve:
Lakcíme:


Szérializált URL kódolt szöveg, itt fog megjelenni:




serializeArray() program leírása.

<head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $("#btn_slizetomb").click(function(){
                      $("#slizetomb_adat").html("");           // Ez nem kötelező. De, megakadályozza bemutatónál az ismétlődéseket.
        var Stomb = $("#tombteszt_urlap").serializeArray();
        $.each(Stomb, function(i, field){
            $("#slizetomb_adat").append(field.name + ":" + field.value + " <br> ");
        });
    });
});
</script>
</head>

<body>
<p>Ez egy teszt űrlap.<br>Tetszőleges adatokat írhatunk be, hogy lássuk, mi történik Serialize hatására.</p> 
<hr>

   <form name="tombteszt_urlap" id="tombteszt_urlap" action="">
        Vezetékneve: <input type="text"  name="Vezetekneve"  id="Vezetekneve" size="32" value="Jquery"> <br>
        Keresztneve: <input type="text"  name="Keresztneve" id="Keresztneve" size="32" value="Serialize"> <br>
        Lakcíme:       <input type="text"  name="Lakcime" id="Lakcime" size="50" value="8000 jQuery Serialize utca 1355"> <br><br>
    </form>
	
<hr>
<button id="btn_slizetomb">Űrlap adatok, values.<br>Serialize tömbbe.<br> Kattints ide!</button>
<p> Szérializált URL kódolt szöveg, itt fog megjelenni: </p>
<div id="slizetomb_adat" style="font-size:14px;"></div>
<br>

<body>