ajax获取json数组怎么循环显示在div中

xibo0925 2017-04-13 02:49:12

$(function () {
$.ajax({
url: '${ctx}/wm/wmBorrow/status1',
type: 'post',
dataType: 'json',
timeout: 1000,
beforeSend: LoadFunction, //加载执行方法
error: erryFunction, //错误执行方法
success: succFunction //成功执行方法
})
function LoadFunction() {
$("#d1").html('加载中...');
}
function erryFunction() {
alert("error");
}
function succFunction(tt) {
$("#d1").html('');
var json = eval(tt); //数组
$.each(json, function (index, item) {
//循环获取数据
var s1 = json[index].toolBy.name;
var s2 = json[index].status;
var s3 = json[index].outUser.name;
var s4 = json[index].outDate;
var s5 = json[index].returnDate;
var s6 = json[index].purpose;
var s7 = json[index].useAddress;
var div="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>"+s1
+"</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li> <li id='l1'>借出人："
+s3+"</li><li id='l1'>借出日期:"+s4+"</li><li id='l1'>归还日期:"+s5+"</li><li id='l1'>借出用途:"+s6+"</li><li id='l1'>借出地点:"+s7+"</li></u></div>";

$("#d1").html(div);
});
}
});

帮我看看代码哪里出问题了只能刷新出一div

...全文

3825 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

xibo0925 2017-04-15

打赏
举报

引用 20 楼 u010344942 的回复:

改成 $("#d1").append(div);

恩恩改了已经

u010344942 2017-04-15

打赏
举报

改成 $("#d1").append(div);

暖心大人 2017-04-14

打赏
举报

引用 14 楼 xibo0925 的回复:

显示效果跟你的图片里的显示一样了我需要平铺显示不是垂直显示，还有一个问题是我是循环着一条数据

平铺不就是个样式问题嘛 2333333 中午吃完了再回复你哈哈我大概知道你想要的东西了

xibo0925 2017-04-14

打赏
举报

xibo0925 2017-04-14

打赏
举报

显示效果跟你的图片里的显示一样了我需要平铺显示不是垂直显示，还有一个问题是我是循环着一条数据

xibo0925 2017-04-14

打赏
举报

引用 12 楼 qq_32687803 的回复:

就和这种循环差不多啊

这是我修改的内容；
显示效果如下图：

暖心大人 2017-04-14

打赏
举报

就和这种循环差不多啊

xibo0925 2017-04-14

打赏
举报

能帮忙改改吗，far each 放进拼接里？

暖心大人 2017-04-14

打赏
举报

你的回调函数假设你有6组数据你如果放到大的div中，就应该有6个小div 我不知道你为什么要在循环里设置那么多相同的ID...id不能重复吧

。 $("#d1").html(div); 这个.html吧我记得也不能够一直追加属性他会把你#d1里面的html全部替换掉你应该是直接拼接好一个完整的循环列表然后再html的#d1里面还有你得吧你循环里的id改下吧看着真的很别扭能循环出很多个相同id的div 不怕报错么

xibo0925 2017-04-14

打赏
举报

大家都来帮帮忙呗！求各位大神指导指导万分感谢

xibo0925 2017-04-14

打赏
举报

<%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>监控状态</title> <meta name="decorator" content="default" /> <script type="text/javascript"> $(function() { $.ajax({ url : '${ctx}/wm/wmBorrow/status1', type : 'post', dataType : 'json', timeout : 1000, beforeSend : LoadFunction, //加载执行方法 error : erryFunction, //错误执行方法 success : succFunction //成功执行方法 }) function LoadFunction() { $("#d1").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { var json = eval(tt); //数组 var div; $.each(json,function(index, item) { //循环获取数据 var s1 = json[index].toolBy.name; var s2 = json[index].status; var s3 = json[index].outUser.name; var s4 = json[index].outDate; var s5 = json[index].returnDate; var s6 = json[index].purpose; var s7 = json[index].useAddress; div+="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>" + s1 + "</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li><li id='l1'>借出人：" + s3 + "</li><li id='l1'>借出日期:" + s4 + "</li><li id='l1'>归还日期:" + s5 + "</li><li id='l1'>借出用途:" + s6 + "</li><li id='l1'>借出地点:" + s7 + "</li></u></div>"; $("#d1").html(div); }); } }); </script> <style> #d3 { width: 100%; height: 100%; } div { border-radius: 15px; } #h1 { class: panel-title; } #d2 { width: 202px; height: 300px; float: left; margin: 10px; border: 2px lightskyblue solid; padding-right: 20px; class: panel panel-info; } #d1 { class: panel-heading; padding-top: 15px; } #l1 { list-style-type: none; line-height: 2.5; width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #l2 { list-style-type: none; line-height: 5; width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#">监控状态</a></li> </ul> <form:form id="searchForm" modelAttribute="wmBorrow" action="${ctx}/wm/wmBorrow/status" method="post" class="breadcrumb form-search"> <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" /> <input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}" /> <ul class="ul-form"> <li><label>工具柜名称：</label> <form:select path="toolBy" class="input-medium"> <form:option value="" label="" /> <form:options items="${cabinet}" itemLabel="name" itemValue="id" htmlEscape="false" /> </form:select></li> <li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询" /></li> <li class="clearfix"></li> </ul> </form:form> <sys:message content="${message}" /> <div id="d3"> <div id="d3" style="display: inline-block;"> <c:forEach items="${page.list}" var="wmBorrow"> <div id="d2"> <div id="d1"> </div> </div> </c:forEach> </div> <div class="pagination pager">${page}</div> </div> </body> </html> 现在这个页面很多问题了定时刷新效果也没了，而且之前数据能显示19条现在只有一两条还有就是而且拼接里面的问题也很多拼接以后超链接带的 id传不出去打开链接没有数据，主要想达到的效果是实现页面无刷实时更新数据

xibo0925 2017-04-14

打赏
举报

引用 6 楼 qq_32687803 的回复:

这个循环写的有毛病吧最开始你给定义的div赋值但是循环一遍就重新赋了一遍值啊就和楼上说的一样 div+= .... 不应该是div = ...
然后你下面是找ID来进行插入你这个ID找的也不对吧你循环的div里面 ID全部都一样啊应该是找他的父级元素来进行赋值吧你这样子产生的效果就是循环一遍给第一个div改变一次
要不你就把div的ID改成动态的可能会有效果

引用 6 楼 qq_32687803 的回复:

这个循环写的有毛病吧最开始你给定义的div赋值但是循环一遍就重新赋了一遍值啊就和楼上说的一样 div+= .... 不应该是div = ...
然后你下面是找ID来进行插入你这个ID找的也不对吧你循环的div里面 ID全部都一样啊应该是找他的父级元素来进行赋值吧你这样子产生的效果就是循环一遍给第一个div改变一次
要不你就把div的ID改成动态的可能会有效果

这样改吗？div+=以后效果显示两条数据如图所示：

div id换了父级没有明显效果，怎么改动态id

暖心大人 2017-04-14

打赏
举报

这个循环写的有毛病吧最开始你给定义的div赋值但是循环一遍就重新赋了一遍值啊就和楼上说的一样 div+= .... 不应该是div = ... 然后你下面是找ID来进行插入你这个ID找的也不对吧你循环的div里面 ID全部都一样啊应该是找他的父级元素来进行赋值吧

你这样子产生的效果就是循环一遍给第一个div改变一次要不你就把div的ID改成动态的可能会有效果

xibo0925 2017-04-14

打赏
举报

就是想要图片显示这种效果需要ajax异步传输从后台实时更新数据现在只在第一个div中有显示其他的数据都显示不出来

或者说有什么其他方法可以实现，实时更新数据可以给我个思路谢谢

xibo0925 2017-04-14

打赏
举报

引用 3 楼 LJDargon 的回复:

[quote=引用 2 楼 LJDargon 的回复:]

$.each(json, function (index, item) { 
     //循环获取数据 
     var s1 =  item.toolBy.name; 
     var s2 =  item.status; 
     var s3 =  item.outUser.name; 
     var s4 =  item.outDate;
     var s5 =  item.returnDate;
     var s6 =  item.purpose;
     var s7 =  item.useAddress;
     var div="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>"+s1
    	 +"</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li>       <li id='l1'>借出人："
    	    +s3+"</li><li id='l1'>借出日期:"+s4+"</li><li id='l1'>归还日期:"+s5+"</li><li id='l1'>借出用途:"+s6+"</li><li id='l1'>借出地点:"+s7+"</li></u></div>"; 
    	 
    	  $("#d1").html(div);  
    });

直接使用每次循环的对象item试一下！

啊，不好意思，说错了，

var div="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>"+s1
    	 +"</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li>       <li id='l1'>借出人："
    	    +s3+"</li><li id='l1'>借出日期:"+s4+"</li><li id='l1'>归还日期:"+s5+"</li><li id='l1'>借出用途:"+s6+"</li><li id='l1'>借出地点:"+s7+"</li></u></div>";

这一句中，var div；应该定义在循环外，div+=“”；[/quote] 你好怎么定义在循环外？

xibo0925 2017-04-14

打赏
举报

引用 18 楼 qq_32687803 的回复:

那个平铺的效果你应该是循环那个带蓝色边框的div 样式自己就能随便调然后循环出来是一模一样的数据那就是你each用错了 index是下标item才是值

问题是把那个蓝色边框的div写到拼接里就不起作用啦样式也是如此， each 中 json[index].name跟 item.name是一样的我试过了

暖心大人 2017-04-14

打赏
举报

那个平铺的效果你应该是循环那个带蓝色边框的div 样式自己就能随便调然后循环出来是一模一样的数据那就是你each用错了 index是下标item才是值

xibo0925 2017-04-14

打赏
举报

引用 16 楼 qq_32687803 的回复:

引用 14 楼 xibo0925 的回复:
显示效果跟你的图片里的显示一样了我需要平铺显示不是垂直显示，还有一个问题是我是循环着一条数据
平铺不就是个样式问题嘛 2333333 中午吃完了再回复你哈哈我大概知道你想要的东西了

LJDargon 2017-04-13

打赏
举报

引用 2 楼 LJDargon 的回复:

$.each(json, function (index, item) { 
     //循环获取数据 
     var s1 =  item.toolBy.name; 
     var s2 =  item.status; 
     var s3 =  item.outUser.name; 
     var s4 =  item.outDate;
     var s5 =  item.returnDate;
     var s6 =  item.purpose;
     var s7 =  item.useAddress;
     var div="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>"+s1
    	 +"</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li>       <li id='l1'>借出人："
    	    +s3+"</li><li id='l1'>借出日期:"+s4+"</li><li id='l1'>归还日期:"+s5+"</li><li id='l1'>借出用途:"+s6+"</li><li id='l1'>借出地点:"+s7+"</li></u></div>"; 
    	 
    	  $("#d1").html(div);  
    });

直接使用每次循环的对象item试一下！

啊，不好意思，说错了，

var div="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>"+s1
    	 +"</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li>       <li id='l1'>借出人："
    	    +s3+"</li><li id='l1'>借出日期:"+s4+"</li><li id='l1'>归还日期:"+s5+"</li><li id='l1'>借出用途:"+s6+"</li><li id='l1'>借出地点:"+s7+"</li></u></div>";

这一句中，var div；应该定义在循环外，div+=“”；

LJDargon 2017-04-13

打赏
举报

$.each(json, function (index, item) { 
     //循环获取数据 
     var s1 =  item.toolBy.name; 
     var s2 =  item.status; 
     var s3 =  item.outUser.name; 
     var s4 =  item.outDate;
     var s5 =  item.returnDate;
     var s6 =  item.purpose;
     var s7 =  item.useAddress;
     var div="<div id='d1'><ul><li id='l1'><h4 id='h1'><a href=${ctx}/wm/wmBorrowAct/view?id=${wmBorrow.id}>"+s1
    	 +"</a></h4></li><li id='l2'>状态：<font color='red'>'${fns:getDictLabel("+s2+",'borrow_status', 888)}'</font></li>       <li id='l1'>借出人："
    	    +s3+"</li><li id='l1'>借出日期:"+s4+"</li><li id='l1'>归还日期:"+s5+"</li><li id='l1'>借出用途:"+s6+"</li><li id='l1'>借出地点:"+s7+"</li></u></div>"; 
    	 
    	  $("#d1").html(div);  
    });

直接使用每次循环的对象item试一下！

加载更多回复（1）

axios，json数组排序。