搜索
您的当前位置:首页正文

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

2023-12-07 来源:爱乐情感

做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用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通过后台获取数据遍历到前台的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

jquery 如何将Checkbox后台取出的值加载到前台?

思路:将后台取出的值作为选择器,设置Checkbox的选中项。实例演示如下:

1、HTML结构

假设后台取出值:<input type="text" name="val"/> 

<input type="checkbox" name="test" value="1"/>checkbox-1

<input type="checkbox" name="test" value="2"/>checkbox-2<br>

<input type="checkbox" name="test" value="3"/>checkbox-3

<input type="checkbox" name="test" value="4"/>checkbox-4<br>

<input type='button' value='设置'/>

2、jquery代码

$(function(){

$("input[type='button']").click(function() {

$(":checkbox[name='test']").prop("checked",false);

var ck_val = $("input[name='val']").val().split(",");

$.each(ck_val, function(index, val) {

$(":checkbox[name='test'][value="+val+"]").prop("checked",true);

});

});

});

3、效果演示

现有一个集合list,从后台获取的,我现在要在前台用jQuery的each循环遍历所以的值,如何做?急急急!

获取的值为 list(应该是字符串类型了)

JSON.parse(list);

list.each(function(i, temp){})

i 是当前值在列表中的下标。

temp 当前值

each 循环相当于

for(var i =0; i <list.length; I++){

var temp = list[i];

)

jquery从后台取得list,怎么遍历出来

var list;//ajax 异步从后台取回的json [{id:1},{id:2}]

for(var i=0;i<list.length;i++){

    console.log(list[i].id);//ID为假设的属性

}

延伸,javascript中并没有能够兼容所有的foreach。需要自己封装类似的方法。如果你采用类库.就相对简单。

jquery从后台取得list,怎么遍历出来(foreach显示到页面上也就是相当于在jsp页面用foreach显示出来)

你可以for循环先得到数组的数量和内容;

var list_name = [];  

for(var i in data){

    list_name.push(i);

   

}

//这是获取到那个list,然后遍历list_name的个数,然后添加到你要添加的地方。

for (var a , a < list_name.length; a++){

    $("div").append("<span>"+list_name[a]+"</span>")

}

追问啊额 我的list是像呃呃呃 比如朋友圈那种有昵称,内容.....等等。我这个做的是一个下拉加载 通过下拉刷新后获取到的一个list 像你这样写的话我要写很多 并且还要写很多判断的呀。

爱乐情感还为您提供以下相关内容希望对您有帮助:

...从后台获取的,我现在要在前台用jQuery的each循环遍历所以的值,如何...

获取的值为 list(应该是字符串类型了)JSON.parse(list);list.each(function(i, temp){})i 是当前值在列表中的下标。temp 当前值 each 循环相当于 for(var i =0; i &lt;list.length; I++){ var temp = list[i...

jquery 如何将Checkbox后台取出的值加载到前台?

1、HTML结构 假设后台取出值: checkbox-1checkbox-2checkbox-3checkbox-42、jquery代码 (function(){$("input[type='button']").click(function

jquery从后台取得list,怎么遍历出来

var list;//ajax 异步从后台取回的json [{id:1},{id:2}]for(var i=0;i&lt;list.length;i++){ console.log(list[i].id);//ID为假设的属性}延伸,javascript中并没有能够兼容所有的foreach。需要自己封装类似...

jquery从后台取得list,怎么遍历出来(foreach显示到页面上也就是相当...

你可以for循环先得到数组的数量和内容;var list_name = []; for(var i in data){ list_name.push(i); }//这是获取到那个list,然后遍历list_name的个数,然后添加到你要添加的地方。for (var a , a ...

jQuery EasyUI- DataGrid使用 从数据库查询得到数据显示在前台的jsp页 ...

1、首先写入导出按钮和需要导出的datagrid列表。2、点击导出按钮;获得需要导出的字段与不需要导出的数据进行数据处理,并且进行json解析。3、异步操作进入后台获取数据。4、后台将数据写入excel(其中还有一个帮助类)。

怎么用jQuery从后台读取数据并显示到页面

type="text/javascript"&gt;$.ajax({url:"./test1.json",success:function(result){var ul=$('ul');for(var i=0;i

用jquery如何点击button按钮调用后台方法查询数据返回到弹出框内_百...

"json",error: function(t, i) { alert('ajax 出错了');},data: { t: t },success: function(t) { if (t.code) { alert(t.data)} else { alert('没有数据')} } }))})btn就是button的class名。

如何将数据库中的结果循环遍历输出到网页中 php jquery

} 上面的写法可能有错误,意思就是对数据库取出的值遍历,设置name=item且value=data[item]的checked为true。当然也可以用模板,这样就不需要遍历,使用if标签判定value值来插入"checked", 比如:&lt;if condition="$data.item...

jquery怎么实现通过数据库查询后显示到前台

这个和jquery没有关系把,如果你是通过$.AJAX({}),在success接受返回值即就是你的list, 然后就在页面使用jstl标签遍历,如果不知道怎么用jstl可以找度娘

jquery怎么从数据 里面把数据 取出来显示在页面上

第一步,创建一个HTML,html是网页的基础与骨架:第二步、在html中增加测试数据,定义一个checkbox,目的是使用jquery ajax方法get请求获取数据填充,第三步、编写jquery 方法,按钮点击时,触发事件,将选中的checkbox值获取,...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top