时间:2021-05-26
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用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通过后台获取数据遍历到前台的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
之前我已经有讲过后台返回json数据到前台,并在前台遍历json数据。这里讲下直接在JS里创建JSON数据,然后遍历使用~创建代码如下:(创建的是JSON对象)
主要目的a.掌握获取GridPanel当前行的各个字段值的方法b.掌握如何将前台数据传递到后台,并将后台操作结果返回到前台c.掌握如何获取和设置button和t
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原
上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过
具体特征如下:1、通过模板实现俄文正常。2、通过后台数据库生成的静态俄文信息,后台显示正常,前台乱码。3、英文正常。和该主题相关的类似或不同表达FSO写UTF-