简单描述:一个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的更多相关文章

  1. 表单格式化插件jquery.serializeJSON

    前言 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交. 而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常 ...

  2. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  3. 在JS中将指定表单内的“具有name数据的表单元素的值”封装为Get形式的字符串

    //封装post时候,表单中所有具有name数据的表单元素的值,并返回“n=1&p=a” function serialize(formid) { var arr = []; var ipts ...

  4. 原 form 表单中 disabled 属性的元素不参与表单提交

    https://blog.csdn.net/benben683280/article/details/79173336

  5. 获取HTML网页中option标签元素的值

    在进行表单元素的操作时,难免会遇到对option元素的挑选,下面的示例代码能够很好的获取到你option元素选择的值,如果要传递给后端,可通过ajax或者其他方式传递即可. 示例代码 <!doc ...

  6. HTML笔记(五)表单<form>及其相关元素

    表单标签<form> 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入信息的元素. 输入标签<input> 输入标签的输入类型由其类型属性type决定.常见的输入 ...

  7. jQuery-处理元素内容、表单元素

    处理元素内容 1.text方法 使用说明: 1)不传参数 得到jQuery对象内所有元素及其后代元素的文本内容 2)传入用于设置匹配元素的文本内容 3)传入function 使用函数来设置jQuery ...

  8. JavaScript之控制表单元素的值

    表单元素.value 获取表单元素的值 表单元素.value='这是修改后的值' 修改表单元素的值 案例: (1)html <input type="text" id=&qu ...

  9. jquery获取元素索引值index()

    jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 ...

随机推荐

  1. ORM映射和路由系统

    ORM映射: OBJECT ====> 对象 RELATION ===> 联系 MODEL ===> 数据模型 安装pyMysql 安装flask-sqlAchemy 导入: fro ...

  2. jq的error

    error事件会在js发生错误或资源加载失败时触发.该事件主要用于window对象.<img>等元素. 此外,你可以为同一元素多次调用该函数,从而绑定多个事件处理函数.触发error事件时 ...

  3. Javascript - ExtJs - 弹窗

    1.确认对话框 Ext.MessageBox.alert( title,content,fn) Ext.onReady(function () {    Ext.Msg.alert("好吧, ...

  4. 微信小程序入门八头像上传

    1. action-sheet 底部弹出可选菜单组件 2. wx.uploadFile 将本地资源上传到服务器 3. wx.chooseImage 从本地相册选择图片或使用相机拍照. 4. wx.pr ...

  5. 20165237 2017-2018-2 《Java程序设计》第4周学习总结

    20165237 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 1.子类只能有一个父类,父类可以有多个子类. 2.子类继承父类的成员变量和方法. 3.开闭原 ...

  6. python模块-----pymysql

    一.安装 本模块为python第三方模块,需要单独安装.作用为调用mysql接口执行模块 pip3 install pyMySql 操作步骤: #!/usr/bin/python3 import py ...

  7. log4j - 输出格式控制, PatternLayout参数含义以及详细配置

    转载自:https://blog.csdn.net/reserved_person/article/details/52849505 做项目被log4j的输出格式化参数搞烦了,索性把API的相关部分大 ...

  8. 在Linux安装ASP.NET Core运行时环境

    我使用的是Centos7 ,其它的Linux请参考微软文档   微软官方介绍文档:                                https://www.microsoft.com/n ...

  9. 待解决输入istream_iterator

    山寨版 istream_iterator 输入 第一行是整数t,表示有t组数据,每组数据一行,三个整数加两个字符串.字符串是不含空格的. 输出 对每组数据,输出二行,在第一行输出第一个数,第二行原样输 ...

  10. Python3学习笔记03-基础数据类型

    Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对 ...