用JQuery对表单输入项序列化和反序列化 (自封装小工具, 简单好用
核心代码: 往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
demo
姓名:
手机号:
城市:
详细住址:
- 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);
}