ajax回调json数组对象,jquery中$.each()循环解析
2017-03-13 17:03
525 查看
头一回把代码写成这样(thinkphp5.0),自己都不知道获取到的json数组已经是几维,但是前台使用js解析的过程中还是蛮辛苦的,大致流程如下:
-代码工作流程:-get到相应界面后,ajax异步访问后台服务器;
-服务器接收post请求查询对应数据,查询的结果为两个结果集封装在一个json数组中,数组每项为一个object对象,每个对象含有两个子对象,其中一个子对象包含多个不定子对象(我自己都晕);
-ajax回调函数收到json数据后,多个嵌套循环解析数据,插入文档DOM元素。
上js代码:
<script> $(function () { $.ajax({ type:"post", url:"{:url('Index/zjbbdata')}", dataType:'json', success:function(data){ //console.log(data['result'][0].category.CategoryName); $.each(data['result'],function (i,item) { $.each(data['result'][i],function (j,item2) { //接收到json数据result[category]; //console.log(item2); if(Object.prototype.toString.call(item2)!='[object Array]')//item2为数组时跳过append(); { $(".main").append(' <div class="pinholder" style="height: 26px;">\ <div class="pin">\ <div class="tit">\ <h2>'+item2.CategoryName+'</h2>\ <span>'+item.app.length+'款产品</span></div>\ </div>\ </div>'); }//第一次判断数组结束 //console.log(item3); if(Object.prototype.toString.call(item2)=='[object Array]')//item3为数组时执行append(); { $.each(data['result'][i],function (n,item3) { //console.log(item3); $.each(data['result'][i] ,function (m,item4) { //console.log(item4); if(typeof (item4)=='object') //判断item4此时为对象; { $(".main").append('<div class="lists">\ <ul>\ <li class="app-item link" data-href="#" data-sid="77208" data-asin="">\ <div class="list-img">\ <img src="/public/static/images/'+item4.Pic+'" alt=""></div>\ <div class="list-cont">\ <div class="lt-c-tit">\ <h2>\ <a href="http://app.so.com/zjbb/#nogo">'+item4.AppName+'</a></h2>\ <span>13.71MB</span></div>\ <div class="lt-c-s-n">\ <div class="lt-c-s-n-l">\ <div class="star">\ <p style="width: 88%;"></p>\ </div>\ </div>\ <span>'+item4.DownloadCount+'万次下载</span></div>\ </div>\ <div class="btns">\ <a class="dl-btn js-downloadBtn" href="#">\ <span></span>下载</a>\ </div>\ </li>\ </ul>\ </div>') } })//item4循环结束; });//item3循环 }//第二次判断数据结束; });//item2循环 });//item循环 } }); }); </script>
上php代码:
public function zjbbdata() { $cate=db('category')->select(); foreach($cate as $n=> $val){ $con['CategoryID']=$val['CategoryID']; $apps[$n]=db('apps')->alias('a')->where($con)->order("DownloadCount DESC")->limit(5)->select(); $data[$n]=array( 'category'=>$val, 'app'=>$apps[$n], ); } //var_dump($data[10]); return (array( 'result'=>$data,'status'=>1, 'msg'=>'获取成功!')); }
相关文章推荐
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- Jquery.ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
- JQuery解析json对象、遍历筛选数组
- Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- Jquery.ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
- Ajax使用方法,经典Ajax封装,可接收解析后台传回的json对象和json数组
- PHP文件数据传输用jQuery-ajax进行浏览器->服务器->数据文件->服务器->浏览器的数据传输($_POST,$_GET,json_encode(数组数据回应),json数据解析)
- jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- jquery遍历筛选数组的几种方法和遍历解析json对象
- 后台ajax调用中字符串到jquery中的json对象和数组对象转换问题
- 参照jQuery.ajax改造tangram的baidu.url.jsonToQuery()方法使之支持json嵌套对象的解析
- jQuery封装解析数据(数组,json对象)