form表单操作是Web开发过程中使用频率很高，而且在与后端做数据对接时，后端开发人员编写的接口通常要求前端开发人员将form表单的数据值以json对象格式传回，因此我们可以封装一个公共调用的方法来实现，如下所示：
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>将表单数据转为json对象</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>用户权限</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>手机号</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">将表单数据转为json对象</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")); //调用
});
//将form表单数据拼接成json对象
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); //将拿到的键值对转换位json对象
return jsons;
}
</script>
</body>
</html>
我们可以将运行的结果在浏览器的控制台打印出来，如下所示：
image.png
