获取表单内的所有元素的值表单格式化插件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")取值

总结：就是通过使用serializeJson()来完成js对象的封装

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

猜你喜欢

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