原生js实现form表单序列化的方法

当我们有form表单而且里面的表单元素较多时，咱们总不能一个个去获取表单元素内的值来进行拼接吧！这样会很让人蛋疼！为了方便与后台交互并且提高自己的开发效率，并且不让你蛋疼；我们一起用原生来写一个表单序列化方法：

先介绍一下jquery中有相应的表单序列化的方法：

1.serialize()方法

格式：var data = $("form").serialize();

功能：将表单内容序列化成一个字符串。

这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

2.serializeArray()方法

格式：var jsonData = $("form").serializeArray();

功能：将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name；

下面我们用原声js来实现我们的form表单序列化的函数；

首先我们列明步骤：

1）先获取form表单使用ById或者是forms；

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
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js的各种数据类型判断的介绍

    1.typeof typeof 用来判断各种数据类型,有两种写法:typeof xxx , typeof(xxx) 例如: typeof 2 输出 number typeof null 输出 object typeof {} 输出 object typeof [] 输出 object typeof (function(){}) 输出 function typeof undefined 输出 undefined typeof '222' 输出 string typeof true 输出 boole

  • jQuery序列化form表单数据为JSON对象的实现方法

    jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs

  • js实现延迟加载的几种方法详解

    js实现延迟加载的几种方法详解

    这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段. 解题思路 : 1.defer属性 <script src="file.js" defer> </scr

  • angularJs中$scope数据序列化的实例

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <script src="jquery.min.js"></script> </head> <bod

  • JS实现的JSON序列化操作简单示例

    JS实现的JSON序列化操作简单示例

    本文实例讲述了JS实现的JSON序列化操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JOSN对象</title> <script> var book={ title:"php 最佳实践", authors:['jack'], edi

  • JavaScript解析及序列化JSON的方法实例分析

    JavaScript解析及序列化JSON的方法实例分析

    本文实例讲述了JavaScript解析及序列化JSON的方法.分享给大家供大家参考,具体如下: JSON 之所以这么流行,是因为 JSON 数据结构可以被解析为 JavaScript 对象.JSON 之前的 XML 数据结构要被解析,需要先解析成 DOM 文档,然后再从中提取出数据.相比之下,JSON 数据结构方便多咯O(∩_∩)O~ 所以 JSON 就成为 web 开发中,用于数据交换的事实标准. 1 JSON 对象 早期的 JSON 解析器是使用 JavaScript 的 eval() 函数

  • 特殊字符的json序列化总结大全

    前言 JSon 数据中的String 传递数据时,需要处理好特殊字符.本文主要给大家总结介绍了关于golang.rust.java和Python对特殊字符的json序列化处理操作,下面话不多说了,来一起看看详细的介绍吧 先来看一段 golang package main import ( "encoding/json" "fmt" ) func main() { data := map[string]string{ "str0": "H

  • js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

    数组的扁平化:将多维数组变成一维数组 对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法: 方法一:递归一 function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ parseArr(arr[i],res); }else{ res.push(arr[i]); } } } var a=[1,[2,[3,4]],5,

  • Django model序列化为json的方法示例

    本文环境 Python 3.6.5 Django 2.0.4 fix(2018.5.19):最近得知Django 的model基类需要声明为abstract,故在原来的代码加入abstract声明,以免误导 在Django中,关于如何将model类序列化为json,一般的话有两a器 将model类转为字典,再使用json库的dumps方法转为json 第一种方法就不多讲了,直接去看官方文档就好啦 一般来说,官方提供的方法应该都是比较好用和稳定的,然而,使用官方的序列化器却问题不少: 格式丑陋,格

  • js序列化和反序列化的使用讲解

    (1)序列化 即js中的Object转化为字符串 1.使用obj.toJSONString() var str=obj.toJSONString(); //将JSON对象转化为JSON字符 2.使用JSON.stringify(obj) var str=JSON.stringify(obj); //将JSON对象转化为JSON字符 (2)反序列化 即js中JSON字符串转化为Object 1.使用eval('('+josnStr+')') var obj=eval("("+data+&

随机推荐