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

最新推荐文章于 2020-07-18 10:40:29 发布

Bwz_Learning

最新推荐文章于 2020-07-18 10:40:29 发布

阅读量5.7k

点赞数 2

分类专栏： JavaScript Util 文章标签： Javascript Form

本文链接：https://blog.csdn.net/zbw18297786698/article/details/61427924

版权

JavaScript Util 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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>