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

时间：2023-03-08 17:27:53

简单描述：一个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对象的封装

相关文章