关闭

ajax回调json数组对象,jquery中$.each()循环解析

标签: thinkphpajax异步json
2768人阅读 评论(0) 收藏 举报
分类:

头一回把代码写成这样(thinkphp5.0),自己都不知道获取到的json数组已经是几维,但是前台使用js解析的过程中还是蛮辛苦的,大致流程如下:

-代码工作流程:

  1. -get到相应界面后,ajax异步访问后台服务器;

  2. -服务器接收post请求查询对应数据,查询的结果为两个结果集封装在一个json数组中,数组每项为一个object对象,每个对象含有两个子对象,其中一个子对象包含多个不定子对象(我自己都晕);

  3. -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][n],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'=>'获取成功!'));
    }

最终效果实现

0
0
查看评论

用jquery的each方法介绍及遍历json对象

用jquery的each方法遍历json对象 //1.首先定义一个json对象jsonStu,保存学生的"姓名"和"分数"信息. //2.然后,通过调用$.each()工具函数,遍历该数据,分别获取"姓名"...
  • daimomo000
  • daimomo000
  • 2016-12-29 11:40
  • 5789

jquery遍历json与数组方法总结each()

在jquery中遍历数组或json数组我们使用最多的方法是each这个函数了或使用foreach,for也是可以实现的,下面我来给大家详细介绍jquery遍历json与数组实现。 代码如下复制代码 先我们来参考each() 方法。 在jquery中遍历数组或json数组我们使用最多的方法是each这...
  • agonie201218
  • agonie201218
  • 2015-05-16 16:27
  • 5264

js遍历数组 循环json数组

JS数组的遍历方法有两种: 一:一般的for循环,例如: 1 2 3 4 var a = new Array("first", "second", "third") for(v...
  • Lkeven
  • Lkeven
  • 2016-10-13 15:37
  • 5375

jQuery AJAX获取JSON数据解析多种方式示例

本文出自:http://blog.csdn.net/haiqiao_2010/article/details/12653555<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:...
  • zhoucheng05_13
  • zhoucheng05_13
  • 2016-12-13 15:12
  • 18023

JSON - 页面解析后台传的JSON

后台传JSON一般有两种格式:① 直接拼接传回;一般返回JSON字符串。out.print("{\"username\":\"yanshi02\",\"password\":\"123456\"}")...
  • J080624
  • J080624
  • 2017-02-10 17:38
  • 4609

【B/S】AJAX读取Json数组里面的数据

一、前言      前些日子做项目,自己发现自己不太会使用AJAX,然后就下苦工学习这方面的知识,重新拿起来。下面给大家分享一下,如何使用ajax读取Json中的数据。二、基础知识什么是json? JSON 指的是 JavaScript 对...
  • kisscatforever
  • kisscatforever
  • 2016-04-25 11:32
  • 1337

ajax返回的json数组处理方式

建立的数据库: CREATE TABLE `try_brand` (   `id` smallint(6) NOT NULL AUTO_INCREMENT,   `brand_name` varchar(15) CHARACTER SET utf32 NOT NULL COMME...
  • u010194859
  • u010194859
  • 2015-10-29 10:11
  • 5260

$.ajax()方法从服务器获取json数据几种方式详解

对$.ajax()方法从服务器获取json数据的几种方式进行详解
  • Sun9528
  • Sun9528
  • 2017-06-10 10:45
  • 12194

jquery 实现Ajax,JS 循环遍历JSON数据

//通过厂商首字母,得到厂商列表 function getVendor(startWord){ // alert(startWord);  $.ajax({   type:'post',   //url actio...
  • henryzhang2009
  • henryzhang2009
  • 2014-10-20 15:36
  • 21895

ajax json 遍历json数组

  • 2016-01-04 10:33
  • 964B
  • 下载
    个人资料
    • 访问:125132次
    • 积分:2135
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:18篇
    • 译文:0篇
    • 评论:12条
    文章分类