我今天遇到遇到一个很恶心的问题,场景是这样的,就是说,如果您用ajax取到后端的数据,遍历了出来,这个时候是一条条的展示出来的,但是展示只是json数据里面的某一个信息,例如是姓名啊,这个时候需要的是用户点击某一个姓名的时候将这个人的所有信息拿到,不知道我描述的是不是可以让您理解,举个例子:
这是遍历出来的数据,ok,我们看一下源数据:
这是一个很标准的json数据,一般后端会给我们传一个类似于这样的数据过来,要求是页面上只展示remarks,别的是用户点击的时候才展示,问题这样描述应该明白了吧!
ok这个时候我们有三种解决方案:一个一个的介绍:
第一个是:让后端写一个接口,数据是有唯一的ID的,这个时候我们遍历拿到的数据是有ID的,那么写一个函数将ID传递给他,他根据ID查数据库,将查询的结果返回过来,我们取到,展示出来,
我简单的写一个代码,不要复制,我直接写的额,不是用编辑器写的,不保证是对的,只是提供一个思路:
遍历拿到数据(我要求的是显示9条数据)
<script type="text/javascript"> var allinfo; var length; window.onload = function(){ allinfo = codes.data.partake; length = allinfo.length; var count; //怎么获取遍历出来json数据的某一条信息的详细信息 if(length < 10){ count = length; }else{ count = 9; } for(var i= 0;i<count;i++){ console.log(allinfo[i].id); var add_testdiv = '<a onclick = "detal_div('+allinfo[i].id+')"><span>'+allinfo[i].remarks+'</span><br /></a>'; $("#test_div").append(add_testdiv); } }
页面div(自己可以做好看一些,我只是演示效果)
<div id="test_div"> </div> <div id="test_detal"> </div>
发送接口的函数
function detal_div(e){ $.ajax({ type:"get", url:"url", async:false, data : { id : e; }, success : function(data){ if(data == 200){ //拿到返回数据 } } }); }
第二个方案是直接将所有的数据全部拿到,根据ID的不同,拿到对应的数据:
之前的遍历数据是一样的,就不重复了,这里怎么拿到页面上对应的数据是下面的js
function detal_div(e){ console.log(e); var add_testdetal = '<span>'+allinfo[e-1].remarks+'</span><br /><span>'+allinfo[e-1].companyName+'</span><br />'; $("#test_detal").append(add_testdetal); }
那么这里解释一下,就是为什么拿到了ID,拿别的数据内容的时候需要的ID-1的操作,很多人写的时候都会忽略这一点,因为数组是从0开始的,我们吧遍历出的结果ID是从1开始的,所以会出现数据对应不上的情况,所以这里需要注意一下,不然数据拿到的不是自己想要的。
第三种方案:将数据全部拿到,也全部取出来,将多余的部分隐藏,然后需要的时候点击显示就行了,这个就不演示也不写源码了,毕竟就是一个隐藏与显示,jQuery提供的现成的办法有好多种:分别是fadein、fadeout....自己看一下这里就不一一列举了。
不明白或者是不理解的,或者是有棘手的问题的,可以私信我,我们一起探讨,共同学习。