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

 更新时间:2018年08月13日 16:22:03   作者:Gemini仔仔  
今天小编就为大家分享一篇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进行一一对应来获取。

以上这篇JQuery通过后台获取数据遍历到前台的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery实现隔行背景色变色

    jQuery实现隔行背景色变色

    这篇文章给大家分享了jQuery实现隔行背景色变色的代码,有相同需要的小伙伴参考下吧
    2014-11-11
  • jquery点击改变class并toggle的实现代码

    jquery点击改变class并toggle的实现代码

    下面小编就为大家带来一篇jquery点击改变class并toggle的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery基础框架浅入剖析

    jQuery基础框架浅入剖析

    jQuery基础框架:原型模式结构、返回选择器实例、访问原型方法、自执行匿名函数详细介绍,需要了解的朋友可以参考下
    2012-12-12
  • Jquery ui css framework

    Jquery ui css framework

    Jquery ui css framework是jquery ui中的一个样式框架,可以利用jquery Theme roller 来生成自己想要的css样式效果。我们可以利用jquery ui的一些框架来开发出基于jquery ui css framework效果的插件来。
    2010-06-06
  • 详解jQuery设置内容和属性

    详解jQuery设置内容和属性

    这篇文章主要介绍了jQuery设置内容和属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • jQuery与ExtJS之选择实例分析

    jQuery与ExtJS之选择实例分析

    对于我们的用途,jQuery是一个更合适。 该js中 的功能更难以配置,这是需要我们的处理的,这是很难定义。
    2010-08-08
  • jQuery实现的购物车物品数量加减功能代码

    jQuery实现的购物车物品数量加减功能代码

    这篇文章主要介绍了jQuery实现的购物车物品数量加减功能,涉及jQuery针对鼠标事件的响应及页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-11-11
  • JQuery 弹出框定位实现方法

    JQuery 弹出框定位实现方法

    这几天一直在研究JQuery,确实很好用,有很多需求都是要弹出框,并且要定位,我这写个简单的例子,希望能分享给大家.
    2010-12-12
  • jQuery实现表单动态添加与删除数据操作示例

    jQuery实现表单动态添加与删除数据操作示例

    这篇文章主要介绍了jQuery实现表单动态添加与删除数据操作,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • jquery struts 验证唯一标识(公用方法)

    jquery struts 验证唯一标识(公用方法)

    本教程将为大家详细介绍下使用公用方法验证jquery struts唯一标识,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-03-03

最新评论