时间:2020-11-15 13:28:23 | 栏目:jquery | 点击:次
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是遍历时出现了问题,下面来简单分析下。
前台代码:
案例1:
<div class="Record"> <div class="RecordLeft text-center fl"> <p><span>经办记录</span></p> </div> <div class="RecordRight fl"> <ul class="fl"> <li> <span>时间</span> <span>步骤</span> <span>意见</span> </li> </ul> <ul class="fl" id="PRO_UL"> </ul> </div> </div>
调用接口:(每个公司用的方法不一样,我这边暂时用封装好的ajax调用)
<script type="text/javascript"> var APPLICATIONID = ""; $(function(){ var data = new Object(); data.APPLICATIONID = CVCFrameWork.getUrlParam("id"); //APPLICATIONID 接口参数 CVCFrameWork.getUrlParam封装的获取id方法 AjaxUtil.Ajax("../Server/Server.aspx/getHandleOpinions", JSON.stringify(data), null, AjaxSuccess, null, null); }); //成功之后要... ... function AjaxSuccess(data) { var result = JSON.parse(data); if (result.state == "SUCCESS") { var message=result.message; var info=JSON.parse(message); if(info.length>0) { for(var i=0;i<info.length;i++) { var myli = "<li><span>"+info[i].PRODATE+"</span><span >"+info[i].PRONAME+"</span><span >"+info[i].PROOPINION+"</span></li>"; $('#PRO_UL').append(myli); //下面三行代码对应的字段是之前写的,获取出来的只是一组数据 //$("#PRODATE").html(info[i].PRODATE); //$("#PRONAME").html(info[i].PRONAME); //$("#PROOPINION").html(info[i].PROOPINION); } } } } </script>
效果:(通过append的方法把后台的几组数据追加到ul里面)
案例2:(通过后台传入的参数,在每个li标签的a里面加上 子数量/总数量,例如标签1 2/12,... ...)
<div class="Mobile_left_con clearfix"> <ul class="clearfix"> <li id="T_00001"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>标签1</span><span class=" T_00002"></span></a></li> <li id="T_00002"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>标签2</span><span class=" T_00002"></span></a></li> <li id="T_00003"><a href="./UnitLicenseRuleSettingDetail.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>标签3</span><span class="T_00003"></span></a></li> </ul> </div>
调用接口:
<script type="text/javascript"> var ABID = ""; var action = 0; var ACCOUNT = ""; var ACENABLE = ""; $(function(){ Init(); }); function UnitRuleInit() { var data = new Object(); data.ABID = "T_00001;T_00002;T_00003";//写死 AjaxUtil.Ajax("../../Server/Server.aspx/LicenseInfo", JSON.stringify(data), null, AjaxSuccess, null, null); }; function AjaxSuccess(data) { var result = JSON.parse(data); if (result.state == "SUCCESS") { var message=result.message; var info=JSON.parse(message); if(info.length>0) { for(var i=0;i<info.length;i++) { $("."+info[i].ABID).html(info[i].ACENABLE + "/" + info[i].ACCOUNT); } } } } </script>
效果:(1/10、3/11、1/12分别是后台获取的数据)
总结:两种获取数据的方法,一种是通过append的方法把li直接拼接到ul里面,一种是前台写死,后台数据根据前台的id进行一一对应来获取。