jquery .serialize() : 자세한 설명은 생략합니다 (영어라서)

<strong style="background-color: transparent; font-family: 'myriad pro', 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 17px; font-style: italic; padding: 0px; margin: 0px; border: 0px; outline: 0px; vertical-align: baseline; color: rgb(51, 51, 51); ">Description: Encode a set of form elements as a string for submission.<ul class="signatures" style="list-style: none; padding: 10px; margin: 1em 19px 1.5em; border: 0px; outline: 0px; font-size: 10px; vertical-align: baseline; background-color: rgb(238, 238, 238); color: rgb(34, 34, 34); font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; line-height: 14px; "><li class="signature" id="serialize" style="padding: 0px; margin: 0px 0px 1.5em; border: 0px; outline: 0px; font-size: 1.1em; vertical-align: baseline; background-image: none; "><h4 class="name" style="padding: 0px 0px 2px; margin: 0.2em 0px 0px; border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: rgb(177, 177, 177); outline: 0px; font-size: 1.4em; vertical-align: baseline; background-color: transparent; letter-spacing: 0px; color: rgb(68, 68, 68); ">version added: <a href="http://api.jquery.com/category/version/1.0/" style="color: rgb(23, 96, 146); text-decoration: underline; border: 0px; padding: 0px; margin: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; ">1.0</a>.serialize()</h4></li></ul><div class="longdesc" style="padding: 0px 20px; margin: 0px 0px 3em; border: 0px; outline: 0px; font-size: 10px; vertical-align: baseline; background-color: transparent; color: rgb(34, 34, 34); font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; line-height: 14px; "><p style="margin-top: 1em; margin-bottom: 1em; padding-right: 1px; padding-left: 1px; border: 0px; outline: 0px; font-size: 1.2em; vertical-align: baseline; background-color: transparent; line-height: 1.7em; ">The <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); ">.serialize()</code> method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements. The form elements can be of several types:<pre style="padding: 10px; margin-top: 0px; margin-bottom: 0px; border: 1px solid rgb(226, 225, 213); outline: 0px; font-size: 1.1em; vertical-align: baseline; background-color: rgb(251, 249, 234); color: rgb(51, 51, 51); text-align: left; font-family: monaco, monospace; float: none; width: auto; overflow-x: auto; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; "><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></pre><p style="margin-top: 1em; margin-bottom: 1em; padding-right: 1px; padding-left: 1px; border: 0px; outline: 0px; font-size: 1.2em; vertical-align: baseline; background-color: transparent; line-height: 1.7em; ">The <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); ">.serialize()</code> method can act on a jQuery object that has selected individual form elements, such as <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); "><input></code>, <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); "><textarea></code>, and <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); "><select></code>. However, it is typically easier to select the <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); "><form></code> tag itself for serialization:<pre style="padding: 10px; margin-top: 0px; margin-bottom: 0px; border: 1px solid rgb(226, 225, 213); outline: 0px; font-size: 1.1em; vertical-align: baseline; background-color: rgb(251, 249, 234); color: rgb(51, 51, 51); text-align: left; font-family: monaco, monospace; float: none; width: auto; overflow-x: auto; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; ">$('form').submit(function() { alert(‎$(this).serialize()); return false; });</pre><p style="margin-top: 1em; margin-bottom: 1em; padding-right: 1px; padding-left: 1px; border: 0px; outline: 0px; font-size: 1.2em; vertical-align: baseline; background-color: transparent; line-height: 1.7em; ">This produces a standard-looking query string:<pre style="padding: 10px; margin-top: 0px; margin-bottom: 0px; border: 1px solid rgb(226, 225, 213); outline: 0px; font-size: 1.1em; vertical-align: baseline; background-color: rgb(251, 249, 234); color: rgb(51, 51, 51); text-align: left; font-family: monaco, monospace; float: none; width: auto; overflow-x: auto; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; ">a=1&b=2&c=3&d=4&e=5</pre><p style="margin-top: 1em; margin-bottom: 1em; padding-right: 1px; padding-left: 1px; border: 0px; outline: 0px; font-size: 1.2em; vertical-align: baseline; background-color: transparent; line-height: 1.7em; ">Warning: selecting both the form and its children will cause duplicates in the serialized string.<p style="margin-top: 1em; margin-bottom: 1em; padding-right: 1px; padding-left: 1px; border: 0px; outline: 0px; font-size: 1.2em; vertical-align: baseline; background-color: transparent; line-height: 1.7em; ">Note: Only <a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2" style="color: rgb(23, 96, 146); text-decoration: underline; border: 0px; padding: 0px; margin: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; ">"successful controls"</a> are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a <code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); ">name</code> attribute. Values from checkboxes and radio buttons (<code style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; background-color: rgb(238, 238, 238); ">input</code>s of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.</div><h3 style="color: rgb(51, 51, 51); padding: 0px; margin: 0.5em 0px 0px; border: 0px; outline: 0px; font-size: 1.9em; vertical-align: baseline; background-color: transparent; font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; ">Example:</h3><div class="entry-examples" id="entry-examples" style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 10px; vertical-align: baseline; background-color: transparent; color: rgb(34, 34, 34); font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; line-height: 14px; "><div id="example-0" style="padding: 0px; margin: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; "><h4 style="padding: 0px; margin: 0.2em 0px; border: 0px; outline: 0px; font-size: 1.8em; vertical-align: baseline; background-color: transparent; letter-spacing: 0px; color: rgb(85, 85, 85); font-weight: normal; font-style: italic; ">Serialize a form to a query string, that could be sent to a server in an Ajax request.</h4><pre class="prettyprint" style="padding: 10px; margin-top: 0px; border: 1px solid rgb(226, 225, 213); outline: 0px; font-size: 1.1em; vertical-align: baseline; background-color: rgb(251, 249, 234); color: rgb(51, 51, 51); text-align: left; font-family: monaco, monospace; float: none; width: auto; overflow-x: auto; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; "><code class="example demo-code" style="padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 1.3em; vertical-align: baseline; background-image: none; "><!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>   <script src="http://code.jquery.com/jquery-latest.js"></script> </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>     <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>   <tt id="results"></tt> <script>     function showValues() {       var str = $("form").serialize();       $("#results").text(str);     }     $(":checkbox, :radio").click(showValues);     $("select").change(showValues);     showValues(); </script> </body> </html></code></pre></div></div>

카페정보

닷넷 (.NET) 프로그래머 모임

카페 전체 메뉴

▲

카페 게시글

jQuery jquery .serialize() : 자세한 설명은 생략합니다 (영어라서)

pengs 추천 0 조회 261 12.08.03 10:49 댓글 4

게시글 본문내용

다음검색

저작자 표시 컨텐츠변경 비영리

pengs
작성자 12.08.03 10:49

첫댓글 소스만 보시면 알듯요 -_-;
대충 설명드리면
form 안에 있는 것들을

a=1&b=2&c=3&d=4&e=5 이렇게 만들어주는...
심재운
12.08.03 13:08

우왕..ㅎㅎㅎㅎ 만약에 값안에 & 들어가면 어떻게 되는거에욤?
pengs
작성자 12.08.03 14:22

테스트 해보시고 결과 부탁드려욧
심재운
12.08.05 21:24

http://pengs.pe.kr/329 사이트 참고하시기 바랍니다. ^^