form表單操作是Web開發(fā)過(guò)程中使用頻率很高，而且在與后端做數(shù)據(jù)對(duì)接時(shí)摇展，后端開發(fā)人員編寫的接口通常要求前端開發(fā)人員將form表單的數(shù)據(jù)值以json對(duì)象格式傳回吻氧，因此我們可以封裝一個(gè)公共調(diào)用的方法來(lái)實(shí)現(xiàn)，如下所示：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>將表單數(shù)據(jù)轉(zhuǎn)為json對(duì)象</title>
<link rel="stylesheet" href="./layui/css/layui.css"><!-- 引入layUI布局樣式 -->
</head>
<body>
<form id="formDemo" class="layui-form">
<table class="layui-table" lay-even>
<tbody>
<tr>
<th>用戶名</th>
<td id="userName">
<div class="layui-form-item layui-input-inline">
<input tyep="text" name="userName" class="layui-input">
</div>
</td>
</tr>
<tr>
<th>登錄密碼</th>
<td id="password">
<div class="layui-form-item layui-input-inline">
<input tyep="text" name="password" class="layui-input">
</div>
</td>
</tr>
<tr>
<th>用戶權(quán)限</th>
<td id="role">
<div class="layui-form-item layui-input-inline">
<input type="text" name="role" class="layui-input" readonly="true" value="管理員">
</div>
</td>
</tr>
<tr>
<th>手機(jī)號(hào)</th>
<td id="phone">
<div class="layui-form-item layui-input-inline">
<input tyep="text" name="phone" class="layui-input">
</div>
</td>
</tr>
<tr>
<th>用戶備注</th>
<td id="nickName">
<div class="layui-form-item layui-input-inline">
<input tyep="text" name="nickName" class="layui-input">
</div>
</td>
</tr>
</tbody>
</table>
</form>
<button class="layui-btn layui-btn-fluid" id="btnform">將表單數(shù)據(jù)轉(zhuǎn)為json對(duì)象</button>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./layui/layui.js" type="text/javascript"></script>
<script type="text/javascript">
layui.use(['form'], function () {
var form = layui.form;
});
</script>
<script type="text/javascript">
$("#btnform").click(function () {
console.log(formJson("formDemo")); //調(diào)用
});
//將form表單數(shù)據(jù)拼接成json對(duì)象
function formJson(id) {
var arr = $("#" + id).serializeArray();//form表單序列化
var jsonStr = "";
jsonStr += '{';
for (var i = 0; i < arr.length; i++) {
jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",';
}
jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
jsonStr += '}';
var jsons = JSON.parse(jsonStr); //將拿到的鍵值對(duì)轉(zhuǎn)換位json對(duì)象
return jsons;
}
</script>
</body>
</html>
我們可以將運(yùn)行的結(jié)果在瀏覽器的控制臺(tái)打印出來(lái)咏连，如下所示：
image.png
