jQuery序列化表單爲JSON對象

<form id="myform">  
    <table>  
        <tr>  
            <td>姓名:</td>  
            <td> <input type="text" name="name" /> </td>  
        </tr>  
        <tr>  
            <td>性別:</td>  
            <td>  
                <input type="radio" name="sex" value="1"> 男  
                <input type="radio" name="sex" value="0"> 女  
            </td>  
        </tr>  
        <tr>  
            <td>年齡:</td>  
            <td>  
                <select name="age">  
                    <option value="20">20</option>  
                    <option value="21">21</option>  
                    <option value="22">22</option>  
                </select>  
            </td>  
        </tr>  
        <tr>  
            <td>愛好</td>  
            <td>  
                <input type="checkbox" value="basketball" name="hobby">籃球  
                <input type="checkbox" value="volleyball" name="hobby">排球  
                <input type="checkbox" value="football" name="hobby">足球  
                <input type="checkbox" value="earth" name="hobby">地球  
            </td>  
        </tr>  
        <tr>  
            <td colspan="2">  
                <input type="button" id="ajaxBtn" value="提交" />  
            </td>  
        </tr>  
    </table>  
</form>
<script type="text/javascript">
	
	$(function() {
		$("#ajaxBtn").click(function() {
			    var params = $("#myform").serializeObject(); //將表單序列化爲JSON對象 
				console.info(params);
			})
	})

	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	}
</script>

上述serializeObject方法是將form序列化爲JSON對象

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章