表单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 仅是思路