jquery把表单数据序列成json,支持多维数组
表单ajax提交时,有些表单过于复杂,后台需要对应字段获取数据比较麻烦;如果前端表单通过脚本序列成json的话,在后台只需要反序列化成对应结构的对象即可方便处理
jQuery.formHelper = { getObject: function (urlserialize) { if (urlserialize) { urlserialize = decodeURI(urlserialize); var kvs = $.map((urlserialize).split('&'), function (e, i) { var kv = (e + '').split('='); return { key: kv[0], value: kv[1] }; }); var params = {}; for (var key in kvs) { var _key = kvs[key].key; var value = null; if (typeof (params[_key]) == 'undefined') { if ($.grep(kvs, function (e, i) { return e.key == _key; }).length > 1) { value = []; value.push(kvs[key].value); params[_key] = value; } else { value = kvs[key].value; params[_key] = value; } } else if (typeof (params[_key]) == 'object') { value = params[_key] ? params[_key] : []; value.push(kvs[key].value); params[_key] = value; } else { value = kvs[key].value; params[_key] = value; } } var resultParams = {}; var objectParams = []; var indexs = {}; for (var key in params) { var lstKey = key.substr(key.length - 6, 6); var subKey = key.substr(0, key.length - 6); var isIndex = (lstKey == '.index' && (urlserialize.indexOf(subKey + '[') == 0 || urlserialize.indexOf('&' + subKey + '[') > 0)); var indexArr = key.match(/\[([^\]]+)\]/ig); if (indexArr) { var __key = key; for (var i = 0; i < indexArr.length; i++) { var _index = (indexArr[i] + '');//.replace(/[\[\]]/g, ''); var indexof = __key.indexOf(indexArr[i]); if (typeof (indexs[__key.substr(0, indexof)]) == 'undefined') { indexs[__key.substr(0, indexof)] = []; } if (indexs[__key.substr(0, indexof)].indexOf(_index) < 0) { indexs[__key.substr(0, indexof)].push(_index); } __key = __key.replace('[', '_').replace(']', '_'); } //console.log(__key); var keys = key.split('.'); var path = ''; var _path = ''; var __path = ''; for (var ik in keys) { var ikey = keys[ik]; if (path == '') { path = keys[ik]; } else { path = path + '.' + keys[ik]; } var pathArr = path.match(/\[([^\]]+)\]/ig); if (__path == '') { __path = path; } else { __path = __path + '.' + ikey; } if (_path == '') { _path = path; } else { _path = _path + '.' + ikey; } //_path = path; for (var ip in pathArr) { var ipath = pathArr[ip]; var indexof = __path.indexOf(ipath); var _index = __path.substr(0, indexof).replace('[', '_').replace(']', '_'); if (indexof > -1) { _path = _path.replace(ipath, '[' + indexs[_index].indexOf(ipath) + ']'); _path = _path.replace('[', '{').replace(']', '}'); } if (_path.indexOf('[') < 0) { if (!isIndex) { //初始化定义开始 var evelCode = 'resultParams.' + _path.replace(/\{/g, '[').replace(/\}/g, ']'); if (evelCode.substr(evelCode.length - 1, 1) == ']') { if (typeof (eval(evelCode.substr(0, evelCode.lastIndexOf('[')))) == 'undefined') { eval(evelCode.substr(0, evelCode.lastIndexOf('[')) + '=[];'); } else { //console.log("hv", eval(evelCode.substr(0, evelCode.lastIndexOf('[')))); } } try { if (typeof (eval(evelCode)) == 'undefined') { eval(evelCode + '={};'); } } catch (e) { //console.log('error', evelCode); } //定义结束 //赋值 if (typeof (params[key]) != 'undefined') { var keyArrays = key.split('.'); var codeArrays = evelCode.split('.'); if (keyArrays[keyArrays.length - 1] == codeArrays[codeArrays.length - 1]) { try { eval(evelCode + '=params[key];'); } catch (e) { //console.log(path); } } } } } } __path = __path.replace('[', '_').replace(']', '_'); } } else { if (!isIndex) { var keys = key.split('.'); var path = 'resultParams'; for (var ik in keys) { path = path + '.' + keys[ik]; try { if (typeof (eval(path)) == 'undefined') { eval(path + '={};'); } } catch (e) { //忽略不规则的 } } try { eval(path + '=params[key];'); } catch (e) { //忽略不规则的 } } } } return resultParams; } return null; } }; /* *使用范例 * <form id="post-form"> * <label>姓名</label><input name="name" type="text" /><br/> * <label>性别</label><input name="sex" type="text" /><br/> * <b>联系方式:</b><label>手机</label><input name="contact.phone" type="text" /><label>邮箱</label><input name="contact.email" type="text" /> * <b>成绩:</b><br /> * <ol> * <li> * <p>语文<input name="score.index" type="hidden" value="s_1" /><input name="score[s_1].title" type="hidden" value="语文" /></p> * <p><input name="score[s_1].value" type="text" /></p> * </li> * <li> * <p>数学<input name="score.index" type="hidden" value="s_2" /><input name="score[s_2].title" type="hidden" value="语文" /></p> * <p><input name="score[s_2].value" type="text" /></p> * </li> * <li> * <p>其他成绩<input name="score.index" type="hidden" value="s_3" /><input name="score[s_3].title" type="hidden" value="其他成绩" /></p> * <p> * <ul> * <li> * <p>德<input name="score[s_3].value.index" type="hidden" value="s3_1" /><input name="score[s_3].value[s3_1].title" type="hidden" value="其他成绩" /></p> * <p> * <label><input name="score[s_3].value[s3_1].value" type="radio" value="差" />差</label> * <label><input name="score[s_3].value[s3_1].value" type="radio" value="一般" />一般</label> * <label><input name="score[s_3].value[s3_1].value" type="radio" value="很好" />很好</label> * </p> * </li> * <li> * <p>智<input name="score[s_3].value.index" type="hidden" value="s3_2" /><input name="score[s_3].value[s3_2].title" type="hidden" value="智" /></p> * <p> * <label><input name="score[s_3].value[s3_2].value" type="radio" value="差" />差</label> * <label><input name="score[s_3].value[s3_2].value" type="radio" value="一般" />一般</label> * <label><input name="score[s_3].value[s3_2].value" type="radio" value="很好" />很好</label> * </p> * </li> * <li> * <p>体育特长<input name="score[s_3].value.index" type="hidden" value="s3_3" /><input name="score[s_3].value[s3_3].title" type="hidden" value="体育特长" /></p> * <p> * <label><input name="score[s_3].value[s3_3].value" type="checkbox" value="跑步" />跑步</label> * <label><input name="score[s_3].value[s3_3].value" type="checkbox" value="跳高" />跳高</label> * <label><input name="score[s_3].value[s3_3].value" type="checkbox" value="足球" />足球</label> * <label><input name="score[s_3].value[s3_3].value" type="checkbox" value="篮球" />篮球</label> * <label><input name="score[s_3].value[s3_3].value" type="checkbox" value="其他" />其他</label> * </p> * </li> * </ul> * </p> * </li> * </ol> * </form> * <script> * $(function(){ * console.log($.formHelper.getObject($('#post-form').serialize())); * //得到的结构是: * { * name:'', * sex:'', * contact:{ * phone:'', * email:'' * } * score:[ * { * title:'语文',value:'' * } * { * title:'数学',value:'' * } * { * title:'其他成绩' * value:[ * {title:'德',value:''} * {title:'智',value:''} * {title:'体育特长',value:[]} * ] * } * ] * } * * * }); * </script> */
文件下载:https://files.cnblogs.com/files/yipiantian/formTojson.js
其他信息:
想办法把文件转成base64,然后在后端解密base64上传到本地,可以参考我的base64上传图片的代码http://www.oschina.net/code/snippet_862118_56288 仅是思路