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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP中的事务使用实例
2015/05/26 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
毕业生自我推荐
2013/11/04 职场文书
高级电工工作职责
2013/11/21 职场文书
高二物理教学反思
2014/02/08 职场文书
国培教师自我鉴定
2014/02/12 职场文书
作风建设年活动总结
2014/08/27 职场文书
2014年工会工作总结
2014/11/12 职场文书
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers