简单了解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 相关文章推荐
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
react路由配置方式详解
Aug 07 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
通过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
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
python一键去抖音视频水印工具
2018/09/14 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
合同补充协议书
2016/03/24 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS