原生JS实现表单序列化serialize()

最新推荐文章于 2024-02-02 01:31:32 发布
VIP文章 最新推荐文章于 2024-02-02 01:31:32 发布
阅读量1.5w 收藏 6
点赞数 4
分类专栏： javascript 浏览器 工具 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35087256/article/details/81253559
版权

使用原生的js模拟了表单序列化，代码中对表单处理尽可能地进行文字说明
其中对于url，字段名称，中文进行了使用了encodeURIComponent()进行编码。

之前博客有介绍encodeURI和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
最低0.47元/天 解锁文章
邵天宇Soy
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS多个表单数据提交下的serialize()应用实例分析
01-19
本文实例讲述了JS多个表单数据提交下的serialize()应用。分享给大家供大家参考，具体如下： 在实际开发场景中，难免遇到需要多个表单的数据传递问题。 之所以要进行多表单的数据传递是因为可以进行数据分组，便于数据的维护。 这个时候，出于不依赖jquery的考虑，有一个原生js函数来解决这个问题无疑是最好的。而源自于《JavaScript高级程序设计》一书的serialize()函数就是解决这个问题的最好办法，该函数如下: function serialize(form){ var parts = [], field = null, i,
原生js实现form表单序列化的方法
01-19
当我们有form表单而且里面的表单元素较多时，咱们总不能一个个去获取表单元素内的值来进行拼接吧！这样会很让人蛋疼！为了方便与后台交互并且提高自己的开发效率，并且不让你蛋疼；我们一起用原生来写一个表单序列化方法： 先介绍一下jquery中有相应的表单序列化的方法： 1.serialize()方法 格式：var data = $(“form”).serialize(); 功能：将表单内容序列化成一个字符串。 这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $(“form”).serialize() 即可。 2.serializeArray()方法 格式：var
javaScript的序列化与反序列化
最新发布
qq_52440306的博客
02-02 1267
总的来说，javaScript对的序列化过程是对象的解析，以字符串形式存储对象结构。反序列化是解析字符串，还原成对象。理解这个过程，有助于我们解决复杂问题。
js serialize() 方法，对表单进行序列化操作
qq_44858403的博客
11-10 5888
1.serialize()方法 serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 语法： $("#id").serialize(); 例子： 表单 <form class="login-form" id="adminInfo" novalidate > <!--输入框-->
原生JS实现表单序列化serialize( )
FellAsleep的博客
01-15 902
使用原生的js模拟了表单序列化，代码中对表单处理尽可能地进行文字说明 其中对于url，字段名称，中文进行了使用了encodeURIComponent()进行编码。 //4.注册 注册账号表单的提交事件 Object.prototype.serialize = function () { var res = [], //存放结果的数组 current = null, //当前循环内的表单控件 i, //表单...
JS serialize() 方法，对表单进行序列化操作
qq_46104221的博客
02-17 750
通过使用这个方法，表单的数据会已aminName=11&adminPassword=aajson格式进行传递。这样在控制层获取是可以直接Admin admin,得到全部的信息，十分方便。
js异步提交form表单之serialize()方法及FormData对象（上传附件）
小虎哥－不可能变成可能
07-28 1122
serialize()和FormData对象都可将表单数据序列化，后通过ajax异步提交，但二者有实质区别： 1 serialize() serialize()是JQuery方法，可序列化表单值创建 URL 编码文本字符串，就是将表单数据以字符串的形式返回。 缺点：只能序列化一般数据，文件上传则无法序列化。 用法： <form id="form"> <input type="text" name="name" value=""&gt...
表单序列化与jq中的serialize使用示例
09-04
主要介绍了表单序列化与jq中的serialize使用,需要的朋友可以参考下
js表单序列化判断空值的实例
10-19
下面小编就为大家带来一篇js表单序列化判断空值的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Ajax serialize() 表单进行序列化方式上传文件
10-19
主要介绍了Ajax serialize() 表单进行序列化方式上传文件的相关资料,需要的朋友可以参考下
JS按条件 serialize() 对应标签的使用方法
12-10
erialize()定义和用法： serialize()方法通过序列化表单值，创建标准的URL编码文本字符串，它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素（比如input或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。 语法： $(selector).serialize() serialize 非常方便的帮我们创建 URL 编码文本字符串 输出的字符串格式为 a=1&b=2&c=3  直接可用于Url传参 下面介绍一下选择性的序列化某些标签的使用方法 将 class 为 searchFrom 下面的类型
JS实现的JSON序列化操作简单示例
10-18
主要介绍了JS实现的JSON序列化操作,结合简单实例形式分析了json序列化操作相关实现方法与相关注意事项,代码备有较为详尽的注释便于理解,需要的朋友可以参考下
js serialize()
mengdc的博客
09-22 2422
//提交 $("input[type='button']").eq(1).click(function () { var data=$("#form").serialize(); var url=$("#form").attr('action'); // alert(data);return false; $.ajax({
js异步提交form表单之serialize()方法及FormData对象
weixin_43891086的博客
11-01 351
https://blog.csdn.net/wq18512847606/article/details/79992578
原生js书写jquery中的serialize用法
qq_45839045的博客
03-13 2170
我们在jQuery中使用ajax收集表单值，常用到serialize来序列化,我们给大家介绍一些这个方法的特性，及如何再原生中实现它。 1.必须具有 … 标签的前提下，才能使用 $(‘form’).serialize() . 2.各项表单元素（input、select、textarea）必须具备 name 属性。 下面我们就用原生js实现这个方法 Object.prototype.serialize = function(){ var res = [], //存放结果的数组 current = nul
JavaScript serialize用法
JOBGONG的博客
10-26 674
var str = $( "form" ).serialize(); 表单样式： 数据格式： single=Single2&multiple=Multiple2&check=check2&radio=radio1
JS获取当前毫秒数(时间戳)汇总
热门推荐
个人前端记录
04-13 11万+
方法1: Date.now() Date对象的内置方法 let a = Date.now(); console.log(a); //1523619204809 方法2: getTime() 创建一个日期对象，调用该对象的getTime()方法 let d = new Date().getTime() console.log(d); //1523...
redis实现hessain序列化反序列化
04-26
Redis的官方未提供Hessian序列化反序列化模块，但可以通过使用开源的Java Hessian库实现Hessian序列化与反序列化。使用步骤如下： 1. 下载Java Hessian库，将jar包添加到Java项目的classpath中。 2. 创建Hessian...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值