JQuery通过后台获取数据遍历到前台的方法
时间:2018-08-13
今天小编就为大家分享一篇JQuery通过后台获取数据遍历到前台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用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里面)
案例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分别是后台获取的数据)
总结:两种获取数据的方法,一种是通过append的方法把li直接拼接到ul里面,一种是前台写死,后台数据根据前台的id进行一一对应来获取。
以上这篇JQuery通过后台获取数据遍历到前台的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- SoapUI实践:自动化测试、压力测试、持续集成
- 如何把kotlin+spring boot开发的项目部署在tomcat上
- 使用开源项目Alipay.AopSdk.Core完成支付宝网页登录
- vhost-user 简介
- 把玩爬虫框架Gecco
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-Web打印
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(89)-EF执行SQL语句与存储过程
- GitHub上大热的Deep Photo终于有TensorFlow版了!
- 资源 | Style2paints:专业的AI漫画线稿自动上色工具
- Github 项目推荐 | 真实全景图像强化学习 AI 平台 —— Matterport3DSimulator
- Github 项目推荐 | 用 Pytorch 实现的 Capsule Network
- 野外动物监测图像挑战赛:预测捕捉到的野外图像是否包含动物
- Github 项目推荐 | 用 Keras 实现的神经网络机器翻译
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python实现抓取web和xcx数据推送到wx和邮件
- 如何快速识别项目水平?
- 亲测有效 | OpenVINO支持ONNX格式文件直接读取了
- 【自动化测试】【Jest-Selenium】(01)—— Jest 入门
- 设计模式:原型模式
- 后端逆袭,一份不可多得的PHP学习指南
- 走进Java接口测试之工具类库 Hutool
- Go开源游戏服务器框架——Pitaya
- 性能分析之pidstat新版本的%wait和mpstat的%iowait、top的wa
- 走进Java接口测试之整合ELK实现日志收集
- 【一天一大 lee】 监控二叉树 (难度:困难)-Day20200922
- 网络学习笔记2——物理层基础(信号与系统)(未完待续)
- 浅谈 React 中的 XSS 攻击
- Chrome 80+ 跨域Samesite 导致的cookie not found 解决方法
- 再不迁移到Material Design Components 就out啦