记一次自己费了好半天用纯js解析服务端json数据的经历,服务器为了封装简历信息,搞了很多list和object,结果交到我这里,看的头皮发麻,js中给大家放入了json数据,格式就是那个样子,下面是源码,仅供学习参考,多多指导。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus"/>
<meta name="author" content=""/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.3/layer.js"></script>
</head>
<style>
.text-Box {
padding: 4px 0px;
font-size: 15px;
font-family: '黑体';
}
.box {
border: 2px solid rgb(67, 142, 185, .5);
padding: 10px 50px 35px 50px;
border-radius: 20px;
}
h5 {
font-style: italic;
font-family: '楷体';
color: rgb(67, 142, 185);
padding-top: 10px;
}
hr {
margin: 0 auto;
}
</style>
<body>
<div id="allResume"></div>
<script type="text/javascript">
var data = [{
"resume": {
"id": 2,
"resumeid": 1,
"resumename": "默认简历",
"updatetime": "2018-03-09 15:03:11.0"
},
"parray": [{
"projectname": "巴巴爸爸",
"resumeid": 1,
"responsibility": "空军建军节",
"description": "啊啊啊",
"endtime": "2018-02-25",
"starttime": "2018-02-25",
"projectid": 1
}],
"awardstates": "success",
"edustates": "success",
"selfstates": "success",
"skarray": [{
"skillid": 33,
"resumeid": 1,
"skillname": "了",
"degree": "了"
}],
"earray": [{
"educationid": 1,
"major": "啊",
"resumeid": 1,
"edubg": "啊",
"university": "啊",
"endtime": "2018-02-25",
"starttime": "2018-02-25"
}],
"userstates": "success",
"array": [{
"awardsid": 34,
"resumeid": 1,
"awardsname": "把",
"awardtime": "2018-02-25"
}],
"searray": [{
"resumeid": 1,
"selfid": 1,
"text": "来咯哦哦呢"
}],
"prostates": "success",
"job": {
"jobExceptation": "软件测试",
"jobcity": "上海",
"jobintensionid": 5,
"jobtime": "2018-02-24",
"jobtype": "啊",
"resumeid": 1,
"salaryExpectation": "啊"
},
"user": {
"address": "的",
"birthday": "2018-02-23",
"headurl": "user11521167088600.jpg",
"id": 2,
"isshow": 0,
"nowaddress": "南京",
"password": "222222",
"phone": "22222222222",
"qq": "123456789",
"sex": "把",
"status": "11",
"username": "啦啦123"
},
"skillstates": "success"
}]
$(function () {
render(data)
})
function render(json) {
var html = '';
$.each(json, function (k, v) {
html = html + '<div class="box">';
var resume = '';
var parray = '';
var skarray = '';
var earray = '';
var array = '';
var searray = '';
var job = '';
var user = '';
// 遍历单条信息
$.each(json[k], function (k, v) {
if (k == 'resume') {
resume = '<h5>简 历</h5><hr><div class="row"><div class="text-Box col-lg-4 col-xs-5">简历类型:<label>' +
v.resumename + '</label></div><div class="text-Box col-lg-4 col-xs-5">更新时间:<label>' +
v.updatetime + '</label></div></div>';
} else if (k == 'parray') {
// 继续遍历list
parray = '<h5>项目经历</h5><hr>';
$.each(v, function (k, object) {
parray = parray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">项目名称:<label>' +
object.projectname + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">项目描述:<label>' +
object.description + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">个人职责:<label>' +
object.responsibility + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">开始时间:<label>' +
object.starttime + '</label></div><div class="text-Box col-lg-4 col-xs-5">结束时间:<label>' +
object.endtime + '</label></div></div>';
})
} else if (k == 'skarray') {
// 继续遍历list
skarray = '<h5>技 能</h5><hr>';
$.each(v, function (k, object) {
skarray = skarray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">技能名称:<label>' +
object.skillname + '</label></div><div class="text-Box col-lg-4 col-xs-5">熟练程度:<label>' +
object.degree + '</label></div></div>';
})
} else if (k == 'earray') {
// 继续遍历list
earray = ' <h5>教育背景</h5><hr>';
$.each(v, function (k, object) {
earray = earray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">学校名称:<label>' +
object.university + '</label></div><div class="text-Box col-lg-4 col-xs-5">专 业:<label>' +
object.major + '</label></div><div class="text-Box col-lg-4 col-xs-5">开始时间:<label>' +
object.starttime + '</label></div><div class="text-Box col-lg-4 col-xs-5">毕业时间:<label>' +
object.endtime + '</label></div></div>';
})
} else if (k == 'array') {
// 继续遍历list
array = '<h5>获得奖项</h5><hr>';
$.each(v, function (k, object) {
array = array + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">获奖名称:<label>' +
object.awardsname + '</label></div><div class="text-Box col-lg-4 col-xs-5">获奖时间:<label>' +
object.awardtime + '</label></div></div>';
})
} else if (k == 'searray') {
// 继续遍历list
searray = '<h5>个人评价</h5><hr>';
$.each(v, function (k, object) {
searray = searray + '<div class="row"><div class="text-Box col-lg-4 col-xs-5">个人评价:<label>' +
object.text + '</label></div></div>';
})
} else if (k == 'job') {
job = '<h5>期望实习</h5><hr><div class="row"><div class="text-Box col-lg-4 col-xs-5">期待工作:<label>' +
v.jobExceptation + '</label></div><div class="text-Box col-lg-4 col-xs-5">工作时间:<label>' +
v.jobtime + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">工作城市:<label>' +
v.jobcity + '</label></div><div class="text-Box col-lg-4 col-xs-5">期待薪资:<label>' +
v.salaryExpectation + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">工作类型:<label>' +
v.jobtype + '</label></div></div>';
} else if (k == 'user') {
user = '<h5>个人信息</h5><hr><div class="row"><div class="text-Box col-lg-4 col-xs-5">姓名:<label>' +
v.username + '</label></div><div class="text-Box col-lg-4 col-xs-5">生日:<label>' +
v.birthday + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">性别:<label>' +
v.sex + '</label></div><div class="text-Box col-lg-4 col-xs-5">家庭住址:<label>' +
v.address + '</label></div></div><div class="row"><div class="text-Box col-lg-4 col-xs-5">现居地:<label>' +
v.nowaddress + '</label></div><div class="text-Box col-lg-4 col-xs-5">QQ:<label>' +
v.qq + '</label></div></div>';
}
})
html = html + resume + job + earray + array + skarray + parray + searray + '</div><div class="space-4"></div>';
})
layer.msg("数据加载完毕。");
$("#allResume").append(html);
}
</script>
</body>
</html>