使用JQuery怎么获取数据遍历到前台

使用JQuery怎么获取数据遍历到前台？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

案例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分别是后台获取的数据）

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

看完上述内容，你们掌握使用JQuery怎么获取数据遍历到前台的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！