jquery把表單資料序列成json，支援多維陣列

JSON jQuery · 發表 2018-09-24 10:32:00

摘要：表單ajax提交時，有些表單過於複雜，後臺需要對應欄位獲取資料比較麻煩；如果前端表單通過指令碼序列成json的話，在後臺只需要反序列化成對應結構的物件即可方便處理 jQuery.formHelper = { getObject: function (urlserialize) { ...

表單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 僅是思路

jquery把表單資料序列成json，支援多維陣列

您可能也會喜歡…