form表單中的帶有name的標簽直接轉JSON

1. 將如下內容引入頁面：
比如說新建一個 a.js，然后在頁面中引入a.js
//將form表單序列化成json格式

$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
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;
};

 

2. 如果form如下所示：

<form id="myform">
<input type="text" id="loginName" name="loginName" class="form-control" placeholder="用戶名" required="">
<input type="password" id="empPwd" name="empPwd" class="form-control" placeholder="密碼" required="">
<button type="submit" class="btn btn-primary block full-width m-b" onclick="login();return false;">登 錄</button>
</div>
</form>

 

此時我們想通過ajax的形式交此form中的帶有name的input到后台，則可以如下使用：

<script>
function login() {
//ajax的形式提交表單
var url = "<%=basePath%>/emp/login";
var data=$("#myform").serializeObject(); //此處調用的就是我們寫好的引入的方法，會將帶有name的input，全部轉為JSON。
$.post(url, data, function (data) {
if (data.result == "false") {
alert(data.reason);
} else {
alert("OK");
}
});
}
</script>

3.相比其他解決方法的優點：
a. 當然可以利用jquery獲取每一個input的值，然后手動組裝成json字符串提交,此操作費時費力，如果是如上結構可以直接使用。
b. 缺點，外層必須是form才行，注意事件需要return false;阻斷原有跳轉。