輔助函式：.serialize()
- 詳細內容
- 分類：JQuery
- 發佈：2013-08-22, 週四 10:41
- 點擊數：2445
(PS:這篇文章是官網API文件的非專業翻譯+個人意見，並且重新排版過)
輔助函式：.serialize()
將一組表單元素編碼成字串以利於提交。
語法：
.serialize() //version added: 1.0
- 此方法不需要任何參數。
- 傳回值：字串。
.serialize()方法以標準的URL編碼表示法建立一個文字字串。他可以對選定的個別的表單控制元素的jQuery物件進行操作。像是<input>, <textarea>, and <select>：$( "input, textarea, select" ).serialize();
但是，還有一個比較簡單的作法，就是可以直接選擇<form>本身來做序列化。
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $(this).serialize() );
});
這個案例中，jQuery會序列化表單中的successful controls。只有表單元素才會被檢查它們所包含的輸入。在其他的案例中，要被序列化的輸入元素必須是傳送給.serialize()方法中的一部分。同時選擇表單與他的子元素會導致重複序列化。
(維克：$( "form" ).serialize() 會序列化整個表單中的表單元素，$( "form, input, textarea" ).serialize() 會導致form 中的 input 與 textarea被重複序列化。)
注意：只有"successful controls" 會被序列化到字串中。遞交的按鈕是不會被序列化的，因為表單不是藉由按鈕來提交。為了讓表單元素的值能被包含在序列化的字串中，元素必須要有name屬性。checkboxes 與 radio buttons 的值(輸入類型為 "radio" 或是 "checkbox" )只有在被選擇的情況下才會被包含進序列化的字串中。檔案選擇元素的資料並不會被序列化。
範例：
把表單序列化成查詢字串，使它能在一個Ajax要求中被傳送到伺服器端。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serialize demo</title>
<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-1.9.1.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>
<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 );
}
$("input[type='checkbox'], input[type='radio']").on( "click", showValues );
$("select").on( "change", showValues );
showValues();
</script>
</body>
</html>
輸出：
按個讚!~支持本站!~