关于jquery form表单序列化的注意事项详解


Posted in jQuery onAugust 01, 2017

本文主要给大家介绍的是关于jquery form表单序列化的一些注意事项,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍:

我们先来讲讲表单中 中readonly和disabled的区别:

readonly只对input和textarea有效, 但是disabled对于所以的表单元素都是有效的,包括radio,checkbox等
如果表单中使用的disabled那么用户是不能选择的,也就是说这个文本框是无法获取到焦点的,而readonly是可以获取到焦点,只是不能修改,为只读

最重要的一点, 在发送表单的时候,表单的控件属性没有name属性该字段不会发送,也不会形成键值对;表单控件属性是disabeld,则该字段不会发送,也不会形成键值对

测试1,没有设置name属性:

<body>
 <form id="form1">
   <select>
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

输出结果如下:

serialize:

 serializeArray:
[]length: 
__proto__: Array(0)

关于jquery form表单序列化的注意事项详解

测试2,设置name属性:

<body>
 <form id="form1">
   <select name="selectHuLuWa">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

输出结果如下:

serialize:
 selectHuLuWa=0
 serializeArray:
 [{…}]
{name: "selectHuLuWa", value: "0"}
length:1
__proto__:Array(0)

关于jquery form表单序列化的注意事项详解

测试3,设置readoly属性:

<body>
 <form id="form1">
   <select name="selectHuLuWa" readonly="readonly">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

测试结果如下:

关于jquery form表单序列化的注意事项详解

测试4,设置disabled属性

<body>
 <form id="form1">
   <select name="selectHuLuWa" disabled="disabled">
    <option value="0">葫芦娃测试0</option>
    <option value="1">葫芦娃测试1</option>
    <option value="2">葫芦娃测试2</option>
   </select>
   <input type="button" id="btnSubmit" value="提交" name="btnSubmit" />
 </form>
 <script type="text/javascript">
  $(document).ready(function () {
   $("#btnSubmit").click(function () {
    console.log("serialize:");
    console.log($("#form1").serialize());
    console.log("serializeArray:");
    console.log($("#form1").serializeArray());
   });
  });
 </script>
</body>

测试结果如下:

关于jquery form表单序列化的注意事项详解

由此可证表单控件没有name属性,设置disabled属性是无法进行序列化的。

**如果需要把disabled的进行序列化的方法为:

在序列化之前移除disabled属性,序列化完成后,再添加上即可。**

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

jQuery 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
简述jQuery Easyui一些用法
Aug 01 #jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
jquery easyui如何实现格式化列
Jul 30 #jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 #jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
You might like
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP中16个高危函数整理
2019/09/19 PHP
phpfpm的作用和用法
2019/10/10 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
EJB的激活机制
2013/10/25 面试题
毕业生自我鉴定
2013/12/04 职场文书
12月红领巾广播稿
2014/02/13 职场文书
殡葬服务心得体会
2014/09/11 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
同事离别感言
2015/08/04 职场文书
Python如何配置环境变量详解
2021/05/18 Python
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
mysql数据库隔离级别详解
2022/06/16 MySQL