jquery把表單資料序列成json,支援多維陣列
阿新 • • 發佈:2018-12-11
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> */