.serialize() vráti: String
Zakóduje zoznam elementov ako reťazec pre požiadavku.
Metóda .serialize()
vytvorí textový reťazec v štandardnom URL kódovom formáte. Operuje na jQuery objekte reprezentujúci sériu formulárových elementov. Formulárové elementy môžu byť rôznymi typmi:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < form > < div >< input type = "text" name = "a" value = "1" id = "a" /></ div > < div >< input type = "text" name = "b" value = "2" id = "b" /></ div > < div >< input type = "hidden" name = "c" value = "3" id = "c" /></ div > < div > < textarea name = "d" rows = "8" cols = "40" >4</ textarea > </ div > < div > < select name = "e" > < option value = "5" selected = "selected" >5</ option > < option value = "6" >6</ option > < option value = "7" >7</ option > </ select > </ div > < div > < input type = "checkbox" name = "f" value = "8" id = "f" /> </ div > < div > < input type = "submit" name = "g" value = "Submit" id = "g" /> </ div > </ form > |
Metóda .serialize()
môže pracovať na jQuery objekte, ktorý má jednotlivé formulárové elementy, ako sú <input>
, <textarea>
a <select>
. Avšak, jednoduchšie je pre serializáciu vybrať samotný <form>
tag:
1 2 3 4 | $( 'form' ).submit( function () { alert($( this ).serialize()); return false ; }); |
To vytvorí štandardné vyzerajúci reťazec pre dotazy:
1 | a=1&b=2&c=3&d=4&e=5 |
Priklady:
Zreťazí formulár do reťazca dotazov, ktorý by mohol byť poslaný serveru v Ajax žiadosti.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> < html > < head > < style > body, select { font-size:12px; } form { margin:5px; } p { color:red; margin:5px; font-size:14px; } b { color:blue; } </ style > </ head > < body > < form > < select name = "single" > < option >Single</ option > < option >Single2</ option > </ select > < br /> < select name = "multiple" multiple = "multiple" > < option selected = "selected" >Multiple</ option > < option >Multiple2</ option > < option selected = "selected" >Multiple3</ option > </ select > < br /> < input type = "checkbox" name = "check" value = "check1" id = "ch1" /> < label for = "ch1" >check1</ label > < input type = "checkbox" name = "check" value = "check2" checked = "checked" id = "ch2" /> < label for = "ch2" >check2</ label > < br /> < input type = "radio" name = "radio" value = "radio1" checked = "checked" id = "r1" /> < label for = "r1" >radio1</ label > < input type = "radio" name = "radio" value = "radio2" id = "r2" /> < label for = "r2" >radio2</ label > </ form > < p >< tt id = "results" ></ tt ></ p > < script > function showValues() { var str = $("form").serialize(); $("#results").text(str); } $(":checkbox, :radio").click(showValues); $("select").change(showValues); showValues(); </ script > </ body > </ html > |