简单了解Ajax表单序列化的实现方法


Posted in Javascript onJune 14, 2019

原生表单序列化

随着Ajax的出现,表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化

在JavaScript中可以利用表单字段的type属性,连同name和value属性,一起实现表单的序列化。

在进行表单序列化之前,需要弄清楚在表单提交期间,浏览器是怎样将数据发送给服务器的。

  • --对表单字段的名称和值进行URL编码,使用和号(&)分隔
  • --不发送禁用的表单字段
  • --只发送勾选的复选框和单选按钮
  • --不发送type为"reset"和"button"的按钮
  • --多选选择框中的每个选中的值单独一个条目
  • --在单击提交按钮提交表单的情况下,也会发送提交按钮,否则不发送提交按钮
  • --<select>元素的值,就是选中的<option>元素的value特性的值。如果<option>元素没有value属性,则就是<option>元素的文本值

实现表单序列化的函数为:

function serialize(form){
var parts=[],
field=null,
i,
len,
j,
optLen,
option,
optValue;
for (i = 0; i < form.elements.length; i++) {
field=form.elements[i];
switch (field.type) {
case 'select-one':
case 'select-multiple':
if(field.name.length){
for (var j = 0; j < field.options.length; j++) {
option=field.options[j];
if (option.selected) {
optValue="";
if (option.hasAttribute) {
optValue=(option.hasAttribute('value') ? option.value : option.text);
}else{
optValue=(option.attribute['value'].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": //文本输入
case "submit": //提交按钮
case "reset": //重置按钮
case "button": //自定义按钮
break;
case "radio": //单选按钮
case "checkbox": //复选框
if (!field.checked) {
break;
}
//执行默认操作
default:
//不包含没有名字的表单字段
if(field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
通过JS深度判断两个对象字段相同
Jun 14 #Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 #Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 #Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 #Javascript
Vue动态创建注册component的实例代码
Jun 14 #Javascript
基于Proxy的小程序状态管理实现
Jun 14 #Javascript
深度了解vue.js中hooks的相关知识
Jun 14 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php正则表达式(regar expression)
2011/09/10 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
django如何自己创建一个中间件
2019/07/24 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Django nginx配置实现过程详解
2020/09/10 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
.net面试题
2016/09/17 面试题
医院2014国庆节活动策划方案
2014/09/21 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书