JavaScript对于Form的序列化和填充数据

曾经终败给现在 2022-09-28 13:09 14阅读 0赞

1、html页面代码

<body>
    		<form id="myform">
    			用户名:<input type="text" name='username' id="username" /> <br /> 
    			密码:<input type="password" name="password" id="password" /> <br />
    			<input type="submit" value="提交表单" id="loginBtn" /><br />
    			<input type="button" value="填充表单" id="fillBtb" /><br />
    		</form>
    </body>

2、关于JavaScript对于Form的序列化和填充数据的封装

var util = {
    	serializeObject: function(form) {
    		var formEL = $(form);
    		var o = {};
    		var a = formEL.serializeArray();
    		$.each(a, function() {
    			if(o[this.name]) {
    				if(!o[this.name].push) {
    					o[this.name] = [o[this.name]];
    				}
    				o[this.name].push(this.value || '');
    			} else {
    				o[this.name] = this.value || '';
    			}
    		});
    		return o;
    	},
    
    	fillFormData: function(form, obj, isStatus) {
    		var formEL = $(form);
    		$.each(obj, function(index, item) {
    		   formEL.find("[name=" + index + "]").val(item);
    		});
    	},
    	empty: function(data) {
    		if(null == data || "" == data) return true;
    		else return false;
    	}
    };

3、工具类的使用代码

<script type="text/javascript">
    			$(function() {
    				//获取表单数据
    				$("#loginBtn").click(function() {
    						var oForm = util.serializeObject("#myform");
    						console.log(oForm)
    					})
    				
    				//填充表单数据
    				var formData = {
    					username: "myusername",
    					password: "mypassword"
    				};
    				$("#fillBtb").click(function() {
    					util.fillFormData("#myform", formData);
    					var oForm = util.serializeObject("#myform");
    					console.log(oForm);
    				})
    
    			});
    </script>

4、完整的页面代码

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery.min.js"></script>
    		<script type="text/javascript" src="js/form.js"></script>
    		<script type="text/javascript">
    			$(function() {
    				//获取表单数据
    				$("#loginBtn").click(function() {
    						var oForm = util.serializeObject("#myform");
    						console.log(oForm)
    					})
    				
    				//填充表单数据
    				var formData = {
    					username: "myusername",
    					password: "mypassword"
    				};
    				$("#fillBtb").click(function() {
    					util.fillFormData("#myform", formData);
    					var oForm = util.serializeObject("#myform");
    					console.log(oForm);
    				})
    
    			});
    		</script>
    	</head>
    
    	<body>
    		<form id="myform">
    			用户名:<input type="text" name='username' id="username" /> <br /> 
    			密码:<input type="password" name="password" id="password" /> <br />
    			<input type="submit" value="提交表单" id="loginBtn" /><br />
    			<input type="button" value="填充表单" id="fillBtb" /><br />
    		</form>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关序列化和反序列化难题：Java数据持久化的常见问题

在Java中，实现数据持久化（序列化和反序列化）时，经常会遇到一些常见的问题。以下是一些主要的问题： 1. 类型不兼容：序列化后的目标平台与源平台可能存在类型差异，需要进行转

╰+哭是因爲堅強的太久メ/ 2024年11月21日 03:12/ 0 赞/ 52 阅读

相关【Java 进阶篇】JavaScript JSON 语法入门：轻松理解数据的序列化和反序列化

![在这里插入图片描述][fe098e18bcc24ed2aaff6195ef3f5a1a.png] 嗨，亲爱的小白们！欢迎来到这篇关于 JavaScript 中 JSON（

╰+哭是因爲堅強的太久メ/ 2024年02月18日 12:37/ 0 赞/ 35 阅读

相关 linux 数据序列化,C# 数据的序列化存取

1，什么是序列化？序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程。在序列化期间，对象将其当前状态写入到临时或持久性存储区。以后，可以

ゝ一世哀愁。/ 2023年01月21日 12:21/ 0 赞/ 46 阅读

相关 JavaScript对于Form的序列化和填充数据

1、html页面代码 <body> <form id="myform"> 用户名:<input type="text" name='user

曾经终败给现在/ 2022年09月28日 13:09/ 0 赞/ 15 阅读

相关 javascript实现json的序列化和反序列化功能

json的序列化和反序列化是我们常用的功能序列化： ![1240][] 序列化：反序列化：eval将字符串反序列化成对象 ![1240 1][] 测试部

﹏ヽ暗。殇╰゛Y/ 2022年06月05日 10:27/ 0 赞/ 522 阅读

相关 springMVC+AJAX+form序列化

公司最近有需求，要数据提交时的对象绑定,下午测试了几个方法，初步解决相关需求，下面使用springboot快速搭建了一个web项目来进行测试。一.form序列化 >

悠悠/ 2022年05月28日 04:00/ 0 赞/ 215 阅读

相关序列化和反序列化

个人学习理解 (只是自己默写序列化和反序列的代码以及几个问题) 1.序列化和反序列化 1.1 什么是序列化和反序列化或者你如何理解序列化和

墨蓝/ 2022年05月26日 02:44/ 0 赞/ 452 阅读

相关原生JavaScript实现form表单序列化的方法

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

妖狐艹你老母/ 2022年04月25日 00:34/ 0 赞/ 234 阅读

相关序列化和反序列化

文章目录 1.概念 2.评价一个序列化算法优劣的两个重要指标 3.序列化技术 3.1 Java自身提供的序列化

桃扇骨/ 2022年03月20日 07:21/ 0 赞/ 551 阅读

相关 JavaScript 对json数据的处理-序列化与反序列化

JavaScript 对json数据的处理-序列化与反序列化序列化 > 将`json`对象的状态信息转换为可以存储或传输的形式 JSON.stringi

川长思鸟来/ 2022年02月16日 12:05/ 0 赞/ 310 阅读