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


Posted in jQuery onAugust 13, 2018

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

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

案例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通过后台获取数据遍历到前台的方法

总结:两种获取数据的方法,一种是通过append的方法把li直接拼接到ul里面,一种是前台写死,后台数据根据前台的id进行一一对应来获取。

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

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 #jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
jQuery中$原理实例分析
Aug 13 #jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 #jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 #jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
You might like
PHP 各种排序算法实现代码
2009/08/20 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
浅谈php提交form表单
2015/07/01 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Vue实现日历小插件
2019/06/26 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
综合素质的自我鉴定
2013/10/07 职场文书
竞选班长演讲稿
2013/12/30 职场文书
分层教学实施方案
2014/03/19 职场文书
安全生产承诺书
2014/03/26 职场文书
上海世博会口号
2014/06/19 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
人工作失职检讨书
2015/05/05 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Python 多线程之threading 模块的使用
2021/04/14 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL