• jquery ajax获取json并解析,获取的json是object对象格式


    首先我们使用的是ajax方式,推荐一个学习网址:
    http://blog.csdn.net/shiyaru1314/article/details/51065410
    这个博主写的特别好。现在来看我们的例子:
    这里是没有参数的get方式:

    function tryapitest(){
    $.ajax({
    url:"/api/category/top/all",
    type:"get",
    dataType:"json",
    success: function(data) {
    console.log(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(XMLHttpRequest.status);
    alert(XMLHttpRequest.readyState);
    alert(textStatus);
    },
    })
    }

    控制台打印出的数据如下:
    控制台信息
    可以看到,我们获取的data由三级组成:ststus,msg,data;
    那么接下来,我们需要获取data:Array(12)这个数据;
    因此在success函数里面添加如下:

       success: function(data) {
    //console.log(data);
    var item=data.data;
    console.log(item);
    }
    },

    此时查看console控制台的输出信息:
    控制台信息2
    可以看到此时已经获得Object的信息了,但是如果需要获取Object里面具体的属性,必须要将Object进行遍历:
    代码如下:

      success: function(data) {
    //console.log(data);
    var item=data.data;
    //console.log(item);
    for(var i=0;i<item.length;i++){
    console.log(item[i]);
    }
    },

    查看控制台的信息:
    控制台信息3
    此时就可以获取对应的数据和属性啦。Object对象必须要遍历之后才可以获取里面的属性,直接item.id是不可以的,必须要item[i].id才可以。
    我们可以将属性打印在网页上,代码如下:

      success: function(data) {
    //console.log(data);
    var item=data.data;
    // console.log(item);

    var htm = "";
    htm += "<table><thead><tr><th>ID</th><th>name</th><th>enName</th></tr></thead><tbody>";
    for(var i=0;i<item.length;i++){
    //console.log(item[i].name);

    htm += '<tr>
    <td>' + item[i].id + '</td><td>'
    + item[i].name + '</td><td>'
    + item[i].enName + '</td><td>';
    }
    htm += '</tbody></table>';
    $("#apitesttry").append(htm);
    },

    页面展示如下:
    页面展示
    这里使用的是for方法进行循环,还有each等方法,博主自己目前才学习到这里,遇到其他难点再来给大家分享吧~

  • 相关阅读:
    java基础之冒泡排序
    java基础之HashSet如何保证对象的唯一性
    java基础之日期时间工具类
    java基础之抽象类和接口的区别
    java tomcat报错: Starting Tomcat v7.0 Server at localhost' has encountered a problem问题
    [bzoj 4196][NOI 2015]软件包管理器
    [bzoj 4034][HAOI 2015]树上操作
    [bzoj 1012][JSOI2008]最大数maxnumber
    详解Trie
    [bzoj 1047][HAOI2007]理想的正方形
  • 原文地址:https://www.cnblogs.com/jpfss/p/9106543.html
Copyright © 2020-2023  润新知