看到公司不少项目都这样使用,实际开发中能节省大量时间对DOM节点获取值的代码。
效果图
CDN引入
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.serializejson.js"></script>
测试代码
<form id="formDemo" class="layui-form">
<table class="layui-table" lay-even>
<colgroup>
<col width="100">
<col width="200">
<col>
</colgroup>
<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>
序列化
function getUser(){ console.log($('#formDemo').serializeJSON()); console.log(JSON.stringify($('#formDemo').serializeJSON())); return JSON.stringify($('#formDemo').serializeJSON()); }
$('#formDemo').serializeJSON()返回的是一个Object体
{userName: "test", password: "test", role: "管理员", phone: "18888888866", nickName: "测试"}
JSON.stringify($('#formDemo').serializeJSON())返回的是JSON字符串
{"userName":"test","password":"test","role":"管理员","phone":"18888888866","nickName":"测试"}
使用Ajax传递给后台使用@RequestBody进行接收
<script type="text/javascript"> function addUser(){ var data = getUser(); $.ajax({ type: "POST", url: "${ctx}/auth/user/create", data: data, dataType: "json", contentType:"application/json", success: function(data){ alert(data.message); if(data.code==0){ layer.closeAll(); window.location.href="${ctx}/auth/users"; } } }); }</script>
若要在JS中获取键值对中的值可以进行如下处理
<script type="text/javascript"> var data = getUser(); var obj = eval("("+data+")"); alert(obj.userName);</script>
本文由 SAn 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为:
2018/01/16 12:00