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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery.pager.js分页实现详解
Jul 29 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP经典面试题集锦
2015/03/19 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
javaScript基础详解
2017/01/19 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
linux面试相关问题
2013/04/28 面试题
银行贷款委托书范本
2014/10/11 职场文书
业务内勤岗位职责
2015/04/13 职场文书
环保建议书作文500字
2015/09/14 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python