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

最新推荐文章于 2022-01-26 08:42:00 发布

原创最新推荐文章于 2022-01-26 08:42:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

本文介绍了如何使用JQuery扩展功能，实现表单输入项的序列化和反序列化。提供了核心代码示例，特别指出只能处理input, textarea, select元素的值，但可以通过扩展来支持更多类型。文章还给出了调用方法和实际使用注意事项，强调被操作元素需设置id。" 111989603,10023917,使用Spring Cloud构建前后端分离的记账系统,"['Java', 'HTML', 'Spring Cloud', '微服务', '配置中心']

核心代码: 往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><title>demo</title></head>
<body>
	<div id="form">
		<div>姓名: <input type="text" name="" id="username"></div>
		<div>手机号: <input type="text" name="" id="phone"></div>
		<div>城市:  
			<select id="city">
				<option value="">请选择城市</option>
				<option value="changsha">长沙</option>
				<option value="yueyang">岳阳</option>
			</select>
		</div>
		<div>详细住址: <textarea id="address"></textarea></div>
		<button id='get'>Get</button>
		<button id='set'>Set</button>
	</div>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>

index.js

$(document).ready(function(){

	click("#get", function(){
		//仅支持input,textarea,select标签, 如果只获取#form下所有input的值, 就只传input就行了,视实际情况而定
		var formData = $("#form").getInputMap('input,textarea,select');
		console.log(JSON.stringify(formData));
	});
	click("#set", function(){
		//实际数据接口获取, 对象属性名要和对应元素的id一致, 否则没效果
		//username, phone, city, address 这些都有对应上面html元素的id
		var returnData = {username: "弗兰银", phone: "18711274052", city: "changsha", address: "桐梓坡"}
		$("#form").deSerialize(returnData,'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 $body = $("body");
function click(elem, callback) {
	$body.on('click', elem, callback);
}