• 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等方法,博主自己目前才学习到这里,遇到其他难点再来给大家分享吧~

  • 相关阅读:
    vscode快捷键的中文版
    小程序css--view标签下英文不换行,中文会自动换行
    微信小程序设置背景铺满全屏
    MAC系统上不能调试华为手机
    js 空函数的作用
    五子棋 AI(AIpha-beta算法)
    ( function(){…} )()和( function (){…} () )是两种立即执行函数
    vscode快捷键
    20192328牛梓萌第一周作业
    第一次作业
  • 原文地址:https://www.cnblogs.com/jpfss/p/9106543.html
Copyright © 2020-2023  润新知