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 09 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
js输出列表实现代码
2010/09/12 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
Vue中props的详解
2019/05/16 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
电大自我鉴定
2013/10/27 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
白酒市场营销方案
2014/02/25 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
关于调整工作时间的通知
2015/04/24 职场文书