用JQuery对表单输入项序列化和反序列化 (自封装小工具, 简单好用

最新推荐文章于 2024-04-22 14:57:52 发布
最新推荐文章于 2024-04-22 14:57:52 发布
阅读量929 收藏
点赞数
文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FuckingCode1/article/details/100054916
版权

 

核心代码: 往jQuery对象添加两个功能函数, 分别是序列/反序列化, 简单粗暴的思路, 不过只能操作input, textarea, select元素的值, 想要操作其他输入类型的值, 如多选/单选框, 可以另外写, 或者在此基础上拓展或按照提供的思路重写, 实际开发中也够用了(懒

$.fn.extend({
	getInputMap: function(elems) {
		var map = {};
		$.each(this.find(elems), function(i,e) {
			e.value.trim() && e.id && (map[e.id] = e.value);
		});
		return map;
	},
	deSerialize: function(data,elems) {
		$.each(this.find(elems), function(i,e) {
			e.id && data[e.id] && $(this).val(data[e.id]);
		});
	}
})

调用: 

var formData = $(selector).getInputMap(selector);

$(selector).deSerialize(data, selector);

 

注意: 被序列/反序列的元素必须设置id, 如下

栗子:

  • html
<!DOCTYPE html>
<html>
<head
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Javascript将form所有内容序列化和反序列化的例子。
04-10
NULL 博文链接：https://goro.iteye.com/blog/1671322
jQuery实现表单序列化反序列化
guoshunwgs
11-20 1627
js序列化反序列化参考： https://blog.csdn.net/zqtsx/article/details/17299087 序列化：var serializeJson = JSON.stringify($("#fiveLevelIndexForm").serializeArray()); 反序列化： var json = $.parseJSON(parent.$("#serializeR...
单表序列化与反序列化
最新发布
youjian42的博客
04-22 334
在我们写APIView的五个接口时，做序列化的时候方法很笨，要写很多代码，这时，我妈可以借助drf提供的序列化类。
JQuery序列化和反序列化
qq_22865989的博客
01-26 1548
序列化：JSON.stringify(obj) 反序列化：$.parseJSON(str)
JQ ajax语法及序列化和反序列化
YouShuihe的博客
10-12 625
JSON.parse()是反序列化函数，用于将字符串转化为json对象；JSON.stringify()是序列化函数，用于将对象转化为字符串；
jquery ajax的serialize()值的序列化以及反序列化
热门推荐
信念堤岸
10-24 1万+
html节点:                                                     姓名：                                                                                                         年龄：                
jQuery中利用form表单提交数据直接封装成实体类注意事项
IP合法判断
04-09 941
学期名称：<input type="text" value="${term.term_name }" name="term_name" id="term_name" placeholder="学期名称 如：2016-2017下学期" class="dfinput" style="width:345px"></input> 开始日期：<input name="fro...
jquery自动将form表单封装成json的具体实现
12-09
在本文中，我们将深入探讨如何使用jQuery将HTML表单（form）数据自动封装成JSON对象，以便于在AJAX请求中传递。这个过程对于前端与后端的数据交互至关重要，特别是当需要发送复杂表单数据时。 首先，让我们看下给定...
第34章 项目1-博客前端：封装库--表单序列化1
08-03
在本章节“项目1-博客前端：封装库--表单序列化1”中，我们将探讨如何通过表单序列化来简化这一过程。表单序列化是一种将HTML表单的数据转换为URL编码字符串的技术，方便通过Ajax发送到服务器。 一、问题所在 传统...
jQuery可视化表单拖拽编辑代码.zip
10-05
这可以通过JSON对象来实现，将元素的坐标和大小等信息序列化，并在页面加载时反序列化恢复布局。 6. **兼容性和性能优化** 考虑到不同的浏览器和设备可能存在兼容性问题，我们需要测试代码在各种环境下的表现。...
jQuery提交多个表单的小例子
12-09
3. **表单提交**：`$("form[name='form1']").submit()`和`$("form[name='form2']").submit()`是jQuery对原生JavaScript的表单提交方法的封装。它们分别模拟用户点击了名为`form1`和`form2`的表单的提交按钮。每个...
jQuery炫酷Input表单输入文字动画特效插件.zip
11-19
《jQuery炫酷Input表单输入文字动画特效插件解析》 在现代网页设计中，用户交互体验至关重要。jQuery作为一款广泛使用的JavaScript库，为开发者提供了丰富的功能和便捷的API，使得实现各种动态效果变得轻而易举。在...
jquery 更新数据的通过样式回显功能
qtwgm09的博客
03-20 766
function updatecontractData() { data ="带到后台的条件，json格式" $.ajax({ type : "GET", url : url, crossDomain : true, dataType : "json", xhrFields : {
JavaScript(27) jQuery获取form表单内容及数据回显
郑清
12-23 8507
在我们提交form表单到后台的时候需要获取字段内容 以及 编辑表单内容时从后台获取到数据时需要进行数据回显到form表单的字段值 下面将这2种方式抽取出来，可以放在公共js部分 然后在需要使用的时候去引入它 //将form里面的内容序列化成json数据 $.fn.serializeJson=function(otherString){ var serializeObj={}, ...
jquery获取表单元素与回显
悦分享
12-16 2105
一、获取哦表单元素 dcoument表单文本对象的集合 all[] 对所有html元素的访问 forms 返回对文档中所有form对象的引用 forms[1] 对所有form对象引用 &lt;script type="text/javascript"&gt; function fun(){ document.all[11].innerHTML = "你好" ; d...
jQuery表单获取,封装对象方法扩展
weixin_34301132的博客
08-09 189
使用jQuery获取表单数据,只有serlisize方法和serlisizeArray方法都不是自己想要的, 所以自己封装了一个获取表单数据为对象的方法,以后用到的时候就不用重复去写了 本方法获取表单时,如果数据为空会返回一个空字符串如{name:""} 本方法扩展到jQuery对象上面,调用方法$("form").serializes(); 1 $.fn.serializes = ...
工具类：封装的JS/JQ对From表单操作方法，一键获取from数据，一键初始化From数据
binggoling
03-26 492
工具类1.获取指定form中的所有的1.获取指定form中的所有的<input,select>对象，封装map 代码： //获取指定form中的所有的<input,select>对象，封装map function getElements(formId) { let form = document.getElementById(formId); let elements = new Array(); let tagElements = form.getEleme
jq表单回显
furfur-jiang的博客
03-17 650
登录的回显 $("#username").val(username) $("#password").val(password) Easyui Form表单的回显 $("form").form('load',data); bootstrap selectpicker多选插件的回显 $('.selectpicker').selectpicker('val',data); ...
JS表单序列化与反序列化代码
时间不会驻留，人生不会重来。
12-17 5202
转载自：https://www.oschina.net/code/snippet_2438265_52549 JS表单序列化与反序列化代码. jQuery有这两个方法 .serializeArray() 与.serialize(). .serializeArray()返回: Array 描述: 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。例如[ { name: a v
jquery序列化表单
05-27
jQuery提供了一个方便的方法可以序列化表单数据，这个方法叫做 `serialize()`。使用这个方法可以将表单中的所有带有name属性的表单元素的值序列化成一个字符串，方便后续的处理。 例如，假设你有一个表单如下所示： ```html <form id="myForm"> <input type="text" name="username" value="John"> <input type="text" name="email" value="john@example.com"> <input type="checkbox" name="subscribed" checked> <input type="radio" name="gender" value="male" checked> <input type="radio" name="gender" value="female"> </form> ``` 你可以使用以下代码来序列化这个表单： ```js var formData = $('#myForm').serialize(); console.log(formData); ``` 输出结果为： ``` "username=John&email=john%40example.com&subscribed=on&gender=male" ``` 可以看到，`serialize()` 方法会将表单元素的 name 属性和值序列化成一个字符串，多个表单元素之间用 `&` 符号连接。注意，对于多选框和单选框，只有选中的元素会被序列化，并且值为其 `value` 属性的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值