获取表单内的所有元素的值表单格式化插件jquery.serializeJSON

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

简单描述：一个form表单里有十几个input或者select，要获取到他们的值，我的做法一直都是$("#id").val();这样做本来没什么说的，但是如果有很多呢，就很麻烦，看了同事的一段代码，很亮眼(其实是我菜ヾ(◍°∇°◍)ﾉﾞ，没见过这种写法)

简介：序列化form表单的数据成JS对象。

代码：

//需要引入的jar包任意一个都可以
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>

//html代码
<form action="" class="horizontal-form" method="post" id="addForm" autocomplete="off"
onSubmit="return false" enctype="multipart/form-data">
<input hidden="hidden" type="text" id="planStatus" name="planStatus"/>
<input type="text" id="planName" name="planName" class="form-control"
th:value="${plan?.planName}"
placeholder="请输入名称"
maxlength="50"/>
<input type="text" id="planCode" value="根据系统编码规则自动生成" disabled="disabled"
name="planCode" class="form-control"
placeholder="自动生成"
maxlength="50"/>
<select id="orgName" class="form-control" placeholder="请选择管理机构">
<option th:each="org : ${orgs}" th:value="${org.orgId}" th:text="${org.orgName}"
xmlns:th="http://www.w3.org/1999/xhtml">
</option>
</select>
<select id="isOpen" name="isOpen" class="form-control js-example-basic-single"
placeholder="开放使用">
<option value="0" selected="selected">不开放</option>
<option value="1">开放</option>
</select>
<div class="col-md-6">
<label class="control-label flex" style="margin-top: 10px;">
上传图标<span class="star align-items">*</span>
</label>
<img th:src="@{/assets-new/apps/img/shangchuan.png}" id="imgPlanIcon"
width="35px" height="35px"/>
<input type="file" id="seledIcon" style="display:none"/>
</div>
<input type="hidden" name="planIcon" th:value="${plan?.planIcon}" id="planIcon"/>
<textarea id="planDesc" name="planDesc" class="form-control" placeholder="请填写描述信息"
th:text="${plan?.planDesc}" maxlength="200">
</textarea>
<input type="text" oninput="clearNoNum(this)" id="sellPrice" name="sellPrice"
class="form-control"
placeholder="请输入销售价" th:value="${plan?.sellPrice}"
maxlength="50"/>
</form>
//js代码
var planJson = JSON.stringify($("#addForm").serializeJson());
//说明一下：$("#addForm").serializeJson() 就是把form中所有的元素序列化成为一个数据对象，名值对的形式
//JSON.stringify()是将一个javascript的值(对象或数组)转换成一个json字符串，可以传递给后台，后台通过getParameter("planJson")取值