简单了解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技术-屏蔽类
Aug 15 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
node+express制作爬虫教程
Nov 11 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
Vue+TypeScript中处理computed方式
Apr 02 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
PHP strtotime函数详解
2009/12/18 PHP
linux iconv方法的使用
2011/10/01 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
python选择排序算法实例总结
2015/07/01 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
秘书岗位职责
2013/11/18 职场文书
求职推荐信范文
2013/12/01 职场文书
学习自我鉴定
2014/02/01 职场文书
2014信息公开实施方案
2014/02/22 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
上课说话检讨书
2015/01/27 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2019新员工心得体会
2019/06/25 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python