原生JS实现表单序列化serialize()
有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活。
用HTML5的FormData来初始化表单
var formdata=new FormData(document.getElementById("advForm"));
看似还可以,但发现有两个问题,
一,formdata.get()方法不知为什么用不了
二,Form Data 数据格式不如Jq的简洁,
WebKitFormBoundary29h06FRZequJgQtR
var stu={
name:"冷荣富",
age:22,
sex:"男"
};
$.ajax({
type : "POST", //提交方式
url : "http://localhost/jsonTest.php",//路径,www根目录下
data : {
"student" : stu
},//数据,这里使用的是Json格式进行传输
success : function(result) {//返回数据根据结果进行相应的处理
alert(result);
}
});
这段JQ提交的数据是序列化的
网查如然不用我造轮子了,转一个可用的
使用原生的js模拟了表单序列化,代码中对表单处理尽可能地进行文字说明
其中对于url,字段名称,中文进行了使用了encodeURIComponent()进行编码。
Object.prototype.serialize = function(){
var res = [], //存放结果的数组
current = null, //当前循环内的表单控件
i, //表单NodeList的索引
len, //表单NodeList的长度
k, //select遍历索引
optionLen, //select遍历索引
option, //select循环体内option
optionValue, //select的value
form = this; //用form变量拿到当前的表单,易于辨识 for(i=0, len=form.elements.length; i<len; i++){ current = form.elements[i]; //disabled表示字段禁用,需要区分与readonly的区别
if(current.disabled) continue; switch(current.type){
//可忽略控件处理
case "file": //文件输入类型
case "submit": //提交按钮
case "button": //一般按钮
case "image": //图像形式的提交按钮
case "reset": //重置按钮
case undefined: //未定义
break;
//select控件
case "select-one":
case "select-multiple":
if(current.name && current.name.length){
console.log(current)
for(k=0, optionLen=current.options.length; k<optionLen; k++){
option = current.options[k];
optionValue = "";
if(option.selected){
if(option.hasAttribute){
optionValue = option.hasAttribute('value') ? option.value : option.text
}else{
//低版本IE需要使用特性 的specified属性,检测是否已规定某个属性
optionValue = option.attributes('value').specified ? option.value : option.text;
}
}
res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
}
}
break; //单选,复选框
case "radio":
case "checkbox":
//这里有个取巧 的写法,这里的判断是跟下面的default相互对应。
//如果放在其他地方,则需要额外的判断取值
if(!current.checked) break; default:
//一般表单控件处理
if(current.name && current.name.length){
res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
}
}
}
return res.join("&");
}
对HTML表单使用:
formElement.serialize();
得到类似如下结果:a=1&b=2&c=3&d=4&e=5
相关链接:https://blog.csdn.net/qq_35087256/article/details/81253559
原生JS实现表单序列化serialize()的更多相关文章
- form 表单序列化 serialize
在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化. jquery提供的serialize方法能够实现. $("#searchForm").seriali ...
- 原生js的表单验证
最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- 原生js制作表单验证,基本的表单验证方法
表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...
- 原生js提交表单
/********************* 表单提交 ***********************/ function ajax(options) { options = options || { ...
- 原生js阻止表单跳转
/* W3C浏览器下的 */ var forms = document.getElementById("from") forms.addEventListener('submit' ...
- js实现表单序列化的两种方法。
function serialize(form) { var parts = [], elems = form.elements, i = , len = elems.length, filed = ...
- (转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- 原生js实现form表单序列化
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
随机推荐
- ant design select placeholder不生效原因
当select的value绑定一个state默认值时,如果默认值是''或null时,placeholder不生效 解决方案:默认值设为undefined
- [LeetCode] Encode N-ary Tree to Binary Tree 将N叉树编码为二叉树
Design an algorithm to encode an N-ary tree into a binary tree and decode the binary tree to get the ...
- jsp 自定义标签解决jsp页面中int时间戳的时间格式化问题
jsp 自定义标签解决jsp页面中int时间戳的时间格式化问题 之前在项目中根据需求,需要自定义标签,经过查询w3c文档,自己也踩了一些坑,特此记录自定义标签的步骤,下面就以我之前的一个例子中的定义一 ...
- Java集合-treebag
import org.apache.commons.collections4.Bag; import org.apache.commons.collections4.bag.TreeBag; impo ...
- F#周报2019年第9期
新闻 对于F#,Visual Studio 2019 RC有哪些更新 Visual Studio 2019 RC现在已经发布 C#版本与工具的升级 如何移植桌面应用程序到.NET Core 3.0 对 ...
- MySQL入门,了解下、
本人菜鸡一个,一份简单MySQL笔记送给大家,希望大家喜欢.(●'◡'●) Ⅰ. 数据备份与导入导出 1.1.备份基本概念介绍 1.2.mysqldump详解 1.3.mydumper浅析 1.4.M ...
- COSC2309/2347 Semester 1, 2019
Mobile Application DevelopmentCOSC2309/2347 Semester 1, 2019Movie Night PlannerAssignment 1 (20 mark ...
- java 多线程争抢资源死锁
多线程争抢资源死锁的原理就是,A线程正在持有锁1却想获取锁2,B线程正在持有锁2却要获取锁1 代码如下: public class Main { static ReentrantLock lock1 ...
- javascript的ES6学习总结(第一部分)
ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 201 ...
- 一文讲透静电放电(ESD)保护(转发)
一直想给大家讲讲ESD的理论,很经典.但是由于理论性太强,任何理论都是一环套一环的,如果你不会画鸡蛋,注定了你就不会画大卫. 先来谈静电放电(ESD: Electrostatic Discharge) ...