关于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实现图片轮播效果
May 08 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jquery图片放大镜效果
Jun 23 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 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
php中常用字符串处理代码片段整理
2011/11/07 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
javascript实现二分查找法实现代码
2007/11/12 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
清空上传控件input file的值
2010/07/03 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python中特殊函数集锦
2015/07/27 Python
python简单实现获取当前时间
2016/08/27 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python文件操作方法详解
2020/02/09 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
中专毕业生自荐信
2013/11/16 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
小学班主任评语
2014/12/29 职场文书
大学生暑期实践报告
2015/07/13 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python