简单描述:一个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. 【译】第三篇 SQL Server安全主体和安全对象

    本篇文章是SQL Server安全系列的第三篇,详细内容请参考原文. 一般来说,你通过给主体分配对象的权限来实现SQL Server上的用户与对象的安全.在这一系列,你会学习在SQL Server实例 ...

  2. call,apply,bind——js权威指南函数属性和方法章节读书笔记

    每个函数(即这两个方法是函数的方法)都包含两个非继承而来的方法: apply()和 call().参数明确,使用call.参数不明确,使用apply,可以遍历数组参数 1,call里面的参数是散开的, ...

  3. DeepLearning.ai-Week4-Deep Learning & Art: Neural Style Transfer

    1 - Task Implement the neural style transfer algorithm Generate novel artistic images using your alg ...

  4. java基础梳理--朝花夕拾(一)

    简介: Java是一种撰写跨平台应用软件的面向对象语言,1995年由Sun Microsystems公司推出. 2009年04月20日,甲骨文74亿美元收购Sun,取得java的版权. 2011年7月 ...

  5. Linux 创建交换分区扩展虚拟内存

    当计算机的物理内存不足时,可以利用磁盘空间扩张为物理内存,实现的方式则是创建交换分区. 命令:mkswap + 分区设备 (格式化交换分区)     mkswapon +分区设备 (启用交换分区)   ...

  6. 在 sql server 中,查询 数据库的大小 和 数据库中各表的大小

    其实本来只想找一个方法能查询一下 数据库 的大小,没想到这个方法还能查询数据库中 各个数据表 的大小,嗯,挺好玩的,记录一下. MSDN资料:https://msdn.microsoft.com/zh ...

  7. 2.Python list_常用方法总结

    一.创建列表 只要把逗号分隔的不同数据项,使用方括号[],括起来即可, 下标(角标索引)从0开始,最后一个一个元素下标可以写-1 list = ['1' , '2' , '3'] list = []  ...

  8. 10分钟搭建Kubernetes容器集群平台【转】

    官方提供3种方式部署Kubernetes minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环境 ...

  9. motor helper

    # -*- coding: utf-8 -*- # @Time : 2019-02-13 10:44 # @Author : cxa # @File : mongohelper.py # @Softw ...

  10. python装饰器的4种类型:函数装饰函数、函数装饰类、类装饰函数、类装饰类

    一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...