jquery遍历后台数据

图示：（由于写的是手机页面，在手机上显示页面图下）

html代码：

<!-- 课程大纲页面 --><div class='dagang_list_w'><div class='exit' >返回</div><div class='concent_wrap'><div class='dg_all_tittle'>课程大纲</div><div class='concent'><div><div class='one'>一级目录</div><div class='two'>二级目录</div></div></div></div></div>

css代码：

.dagang_list_w{  position: fixed; top: 0;bottom: 0;width: 100%;z-index: 111111;background: #fff;
}
.exit{
width: 1.3rem;margin-top: 0.46875rem;margin-left: 0.46875rem;line-height: 0.7812rem;text-align: center;background: #ccc;color: #333;font-size: 0.3rem;margin-bottom: 0.46875rem;}.concent_wrap{width: 90%;margin: 0 auto;border-top: 1px solid #dedede;
}
.dg_all_tittle{font-size: 0.593634rem;text-align: center;font-weight: bold;margin-top: 0.3125rem;margin-bottom: 0.3125rem;
}.concent{width: 100%;overflow: auto;height: 14rem;/* background: #ccc; */box-shadow: 0px 5px 20px 5px #ccc;}
.one{font-size:0.5627rem;font-weight: bold;
}
.two{font-size: 0.46875rem;line-height: 0.7812rem;
}

js代码：

$.ajax({type: 'GET',url: urlasync: true,cache: false,dataType: "json",headers: { "cache-control": "no-cache" },data:{//data数据},success: function (jsonData) {//假设后台传的数据是这样的var jsonData = {"code": "1","message": "操作成功","uuid": "","guideline": {"title": "七年级数学课程大纲","chapters": [{"level1": "1 有理数","level2": ["1.1 正数和负数、数轴、相反数、绝对值", "1.2 有理数的加减法", "1.3 有理数的乘除法", "1.4 有理数的乘方"]}, {"level1": "2 整式","level2": ["2.1 单项式", "2.2 多项式", "2.3 整式的加减法-同类项及合并同类项", "2.4 整式的加减法-去括号及整式的加减法法则", "2.5 整式的乘法、除法"]}, {"level1": "3 一元一次方程","level2": ["3.1 等式的性质及解一元一次方程(1)", "3.2 解一元一次方程（2)", "3.3 一元一次方程的实际应用（1)", "3.4 一元一次方程的实际应用(2)"]}, {"level1": "4 几何图形","level2": ["4.1 几何图形及线段、射线、直线", "4.2 角、角的比较和运算及角度的换算"]}]}}//假设后果传的数据是这样的 ENDif (jsonData.code == 1) {var content = '';                               //html字符串保存内容var dg_all_tittle = jsonData.guideline.title;   //假后台数据需要的标题var chapters = jsonData.guideline.chapters;     //假后台数据需要的课程大纲数组$('.dg_all_tittle').html(dg_all_tittle);//遍历一级目录for (var i = 0; i < chapters.length; i++) {             content += "<div class='one'>" + chapters[i].level1 + "</div>";var level2 = chapters[i].level2;//遍历二级目录for (var j = 0; j < level2.length; j++) {content += "<div class='two'>" + level2[j] + "</div>";}}$('.concent').html(content);    //html()方法替换.concent里的内容}},error: function (XMLHttpRequest, textStatus, errorThrown) {error = "网络错误:" + textStatus;fancyNoticeBox.create($('#wraper'), '提示', error, '关闭', 1);}
});

jquery遍历后台数据相关推荐

jquery请求后台数据（get请求）
直接上代码: <input type="button" id="fileImport" value="读取服务器文件">//点击 ...
JQuery通过后台获取数据遍历到前台
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是 ...
jquery遍历得到的 Map 数据，
关于action将map通过json传回ajax遍历的问题,以及jquery遍历注意编码方式 ajax遍历map 在开发中,经常会遇到在页面生成之后要根据界面操作动态更改页面数据的问题,这种时候一般使 ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
Vue中JS遍历后台JAVA返回的Map数据,构造对象数组数据格式
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
ajax 请求成功再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
java ajax实现分页代码,jQuery实现分页功能（含ajax请求、后台数据、附完整demo）...
需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面实现思路也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第 ...
jQuery实现的分页功能，包括ajax请求，后台数据
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面二:功能实现思路也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

jquery遍历后台数据

jquery遍历后台数据相关推荐

最新文章

热门文章