JQuery通过后台获取数据遍历到前台

做项目中，经常会通过调用后台接口把数据显示到前台页面上来，之前遇到过的问题是，前台页面是用ul+li标签写的，在调用接口调试时发现返回的数据有很多组的，而在前台显示的时候只有一条数据，毋容置疑，一定是遍历时出现了问题，下面来简单分析下。

前台代码：

案例1：

</div>

调用接口：（每个公司用的方法不一样，我这边暂时用封装好的ajax调用）

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，... ...)

调用接口：

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);

};

</script>

效果：（1/10、3/11、1/12分别是后台获取的数据）

总结：两种获取数据的方法，一种是通过append的方法把li直接拼接到ul里面，一种是前台写死，后台数据根据前台的id进行一一对应来获取。

JQuery通过后台获取数据遍历到前台相关推荐

artDialog弹窗+Ztree树从后台获取数据
简单的ArtDialog+Ztree 样子就是这个了学习artDialog的前去artDialog 4.1.7,我们需要的都可以在这里下载.小案例可以看这个*artDialog 4.1.7精简版* ...
Vue---从后台获取数据vue-resource的使用方法
作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...
下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...
今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数 ...
ajax前台获取json,ajax与json 获取数据并在前台使用简单实例
ajax与json 获取数据并在前台使用简单实例发布于 2017-05-18 14:05:38 | 63 次阅读 | 评论: 0 | 来源: 网友投递 AjaxAJAX即"Asynchro ...
表单和ajax中的post请求后台获取数据方法（深度好文）
最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前台主要的contenttype为下面三种:(需要注意的是请求头中data ...
jsp页面加载的时候，从后台获取数据，页面加载完成之后，下拉列表中已经有值
在jsp中,我们经常会遇到这种情况:当页面加载完成之后,下拉列表中已经有数据,这是怎么实现的呢? 下面作以详解: 1.<body οnlοad="fun()">:在js ...
使用echarts绘制统计分析图表（动态从后台获取数据）
说明:实际项目中的统计分析模块不仅需要数据以表格的方式显示,还需要用图形化的方式进一步渲染,以提升数据的可观性,以下是使用echarts来进行绘制统计分析图表的案例: 文章目录一.第一个静态echa ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
JSP中枚举的遍历和Jquery填充后台传入数据
本菜鸟是新的不能再新的菜鸟了,菜鸟作为实习生进来一家公司上班,两眼一抹黑,只是把自己学到的觉得有用的写下来. 项目背景:Spring+Spring mvc+MyBatis JSP中将枚举遍历显示 1. ...

JQuery通过后台获取数据遍历到前台

JQuery通过后台获取数据遍历到前台相关推荐

最新文章

热门文章