JQuery通过后台获取数据遍历到前台的方法

来源：动视网责编：小采时间：2020-11-27 22:09:55

JQuery通过后台获取数据遍历到前台的方法

JQuery通过后台获取数据遍历到前台的方法:做项目中，经常会通过调用后台接口把数据显示到前台页面上来，之前遇到过的问题是，前台页面是用ul+li标签写的，在调用接口调试时发现返回的数据有很多组的，而在前台显示的时候只有一条数据，毋容置疑，一定是遍历时出现了问题，下面来简单分析下。前台代码

推荐度：

点击下载本文 文档为doc格式

导读JQuery通过后台获取数据遍历到前台的方法:做项目中，经常会通过调用后台接口把数据显示到前台页面上来，之前遇到过的问题是，前台页面是用ul+li标签写的，在调用接口调试时发现返回的数据有很多组的，而在前台显示的时候只有一条数据，毋容置疑，一定是遍历时出现了问题，下面来简单分析下。前台代码

做项目中，经常会通过调用后台接口把数据显示到前台页面上来，之前遇到过的问题是，前台页面是用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分别是后台获取的数据）