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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
博士208HAF收音机实习报告
2021/03/02 无线电
php miniBB中文乱码问题解决方法
2008/11/25 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 继承实现方法
2009/08/26 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python 实现归并排序算法
2012/06/05 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
员工自我鉴定范文
2013/10/06 职场文书
校园门卫岗位职责
2013/12/09 职场文书
公司成立感言
2014/01/11 职场文书
运动会通讯稿400字
2014/01/28 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
员工薪酬激励方案
2014/06/13 职场文书
工程造价专业求职信
2014/07/17 职场文书
对照检查剖析材料
2014/09/30 职场文书
北京导游词
2015/02/12 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
python基础入门之字典和集合
2021/06/13 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript