首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 hui序列化表单数据为json的插件
[ Starain.X ] 发布于 : 2017-09-08  浏览 :  次

/*

hui 表单序列化组件

作者 : 楠哥哥

序列化表单数据为json对象;

针对input来说,name为json的key,用户输入值为value;

针对radio和checkbox来说,name为json的key,value属性值为keyvalue;

需要提交的表单外部需用form标签进行包裹.;


针对checkbox复选框值进行以逗号隔开的合并处理,如:

{"姓名":"张三","年龄":"25","兴趣":"唱歌","兴趣":"逛街","兴趣":"泡妞"}

合并为

{"姓名":"张三","年龄":"25","兴趣":"唱歌,逛街,泡妞"}

不需合并时注释掉checkbox合并的代码段即可。


需传入index值,即页面中的第几个表单;

使用时直接hui.getFormjson(index=?)即可,?为页面中的第几个form,如index=1标识第一个form


不想要序列化为json的表单元素不设置name属性即可

*/

hui.getFormjson = function getFormjson(index) {
var formdata = serialize();//序列化表单数据
var formdata = formdata.replace(/&/g, "\",\"");
formdata = formdata.replace(/=/g, "\":\"");
formdata = "{\"" + formdata + "\"}";
 
//checkbox合并开始
var s = formdata;
    var kv = {}, m, reg = /"([^"]+)":"([^"]+)"/g;
    while (m = reg.exec(s)) { kv[m[1]] = (kv[m[1]] ? kv[m[1]] +',':'')+ m[2] }
    var data=JSON.stringify(kv)
    formdata=data.replace(/\[","\]/g,"");    
    //checkbox合并结束
    
return JSON.parse(formdata); ;//将json字符串转换为json对象,hui的postjson只支持json对象
}

function serialize() {
form = document.forms[index - 1];
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;

for(i = 0, len = form.elements.length; i < len; i++) {
field = form.elements[i];

switch(field.type) {
case "select-one":
case "select-multiple":

if(field.name.length) {
for(j = 0, optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if(option.selected) {
optValue = "";
if(option.hasAttribute) {
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(field.name + "=" + optValue);
}
}
}
break;

case undefined: 
case "file": 
case "submit": 
case "reset": 
case "button": 
break;

case "radio":
case "checkbox": 
if(!field.checked) {
break;
}

default:
//不包括不含name的元素
if(field.name.length) {
parts.push(field.name + "=" + field.value);
}
}
}
return parts.join("&");
}

教程更新
More...