原生JS实现Form表单序列化的方法

原生JavaScript表单序列化方案

当页面包含复杂的Form表单且元素众多时，逐个获取并拼接表单值不仅繁琐且易出错。为简化与后端的数据交互流程，提升开发效率，本文提供一种基于原生JavaScript的表单序列化实现方案。

jQuery内置方法回顾

在jQuery库中，已内置便捷的表单序列化功能，主要包括以下两种形式：

1. serialize()方法

语法：var data = $("form").serialize();

功能：将表单内所有有效控件的值序列化为一个标准的URL编码字符串。

在通过Ajax提交表单数据时，无需手动列举每个参数，直接将data参数赋值为 $("form").serialize() 即可完成数据传递。

2. serializeArray()方法

语法：var jsonData = $("form").serializeArray();

功能：将表单序列化为一个JSON格式的数组对象，注意返回的是对象结构而非字符串。

示例格式如：[{"name":"lihui", "age":"20"}, {...}]，可通过 jsonData[0].name 访问具体字段值。

原生JS实现步骤与代码

接下来，我们将使用原生JavaScript实现上述Form表单序列化的功能函数。

实现逻辑主要包含以下步骤：

1）通过ID或表单名称获取Form表单对象；

2）利用elements属性获取表单内所有控件的集合；

3）遍历该集合，根据控件类型进行判断与处理，最终拼接成所需的序列化对象。

具体实现代码如下：

function formser(form){
 var form=document.getElementById(form);
 var arr={};
 for (var i = 0; i < form.elements.length; i++) {
 var feled=form.elements[i];
 switch(feled.type) {
 case undefined:
 case 'button':
 case 'file':
 case 'reset':
 case 'submit':
 break;
 case 'checkbox':
 case 'radio':
 if (!feled.checked) {
 break;
 }
 default:
 if (arr[feled.name]) {
 arr[feled.name]=arr[feled.name]+','+feled.value;
 }else{
 arr[feled.name]=feled.value;
 
 } 
 }
 }
 return arr
 },

以上即为本文的全部内容，希望能为各位的学习和工作带来帮助，欢迎继续支持本站获取更多技术分享。