首先我们使用的是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控制台的输出信息:



可以看到此时已经获得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]);

}

},

查看控制台的信息:



此时就可以获取对应的数据和属性啦。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等方法,博主自己目前才学习到这里,遇到其他难点再来给大家分享吧~

jquery ajax获取json并解析,获取的json是object对象格式的更多相关文章

  1. js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数)

    js中JSON的解析(将json字符串转化为对象)和序列化(将对象转化为json字符串)(函数的功能一般都挺全的,需要的时候去查看完整函数) 一.总结 1.JSON解析:JSON.parse(myJS ...

  2. JSON在线解析,新版本JSON在线解析

    SOJSON,出了新版本的JSON在线解析,真的很好用,可以上下版本.左右版本.效果图如下.它的网址是:http://www.sojson.com/simple_json.html SOJSON集成了 ...

  3. UI5-技术篇-jQuery.ajax执行过程中Token验证及JSON格式传值问题

    最近两天在测试OData服务类方法CREATE_DEEP_ENTITY及GET_EXPANDED_ENTITYSET,刚开始采用ODataModel方式调用没有任何问题,但是ODataModel采用的 ...

  4. JMeter 插件 Json Path 解析 HTTP 响应 JSON 数据(转)

    JMeter 是一个不错的负载和性能测试工具,我们也用来做 HTTP API 接口测试.我们的 API 返回结果为 JSON 数据格式.JSON 简介,JSON 教程. JSON 已经成为数据交换格式 ...

  5. php 解析json失败,解析为空,json在线解析器可以解析,但是json_decode()解析失败(原)

    $str2='{"code":200,"datas":{"id":1,"coupon_id":"123&quo ...

  6. jquery ajax 后台响应成功,返回正确json但不执行success方法,执行error的问题

    昨天被这问题卡了好几个小时.查看http状态码:是200.而且返回了预想的json字符串.但执行的是error方法,不执行success方法.在网上查了一下,才发现是后台页面返回的json字符串格式不 ...

  7. JMeter 插件 Json Path 解析HTTP响应JSON数据

    一.基本简介 JMeter 是一个不错的负载和性能测试工具,我们也用来做 HTTP API 接口测试.我们的 API 返回结果为JSON数据格式.JSON 简介,JSON 教程. JSON 已经成为数 ...

  8. c# json数据解析——将字符串json格式数据转换成对象

    网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的接口,通过例子由易到难总结一下处理过程,希望能帮到和我一样开始不会的朋 ...

  9. c# json数据解析——将字符串json格式数据转换成对象或实体类

    网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的接口,通过例子由易到难总结一下处理过程,希望能帮到和我一样开始不会的朋 ...

随机推荐

  1. Linux day01(二)虚拟机快照和克隆的用法介绍

    一:快照 优点:运行虚拟机后不用担心系统会被弄崩溃了,点击快照会立即恢复到初始状态 缺点:回滚会带来数据的丢失,所以要考虑数据恢复的成本和找回数据时进行操作的成本 1. 在导航栏中找虚拟机快照的小图标 ...

  2. crosswalk 初步使用

    这里简单的说下 crossWalk 的配置; 我在学习 crosswalk 的时候,看到一篇博客,他所记录的已经是很完整的教程了: 点击查看 本文就根据该博客和官网说明,进行部分修改,补充; 首先 c ...

  3. c++编程中处理char和wchar_t的好工具

    /* ttype.h sdragonx 2015-02-18 18:32:43 这个几个模版函数是为了处理ansi或unicode,使字符串值或者字符串函数能够在模版中使用 2018/7/26 23: ...

  4. MyEclipse无法自动编译项目故障一例

    MyEclipse导入项目后发现无法自动编译,classes目录下没有编译的类. 尝试的解决方法: 1.刷新项目,失败: 2.project->clean-,失败: 3.关闭项目再次打开,失败: ...

  5. new mysqli_ and 旧mysql

    旧的php处理语法: 1. <select name="s" onChange="redirec()"> <option selected&g ...

  6. Linux shell命令之cat

    cat:查看文件的内容.连接文件.创建一个或多个文件和重定向输出到终端或文件  用法:cat [选项] [文件] 1. $ cat hello.txt 显示hello.txt文本文件中的内容 2. $ ...

  7. Android Retrofit+Rxjava2问题小记

    网络请求有个问题就是取消操作. 在Rxjava1中,调用subscribe之后会返回Subscription,然后利用CompositeSubscription进行统一管理. 在Rxjava2中,调用 ...

  8. ProcessBar 与SeekBar进度条

    1.进度条关键属性 2.进度条的常用方法 progress = (ProgressBar) findViewById(R.id.horiz); (1)获取第一进度条:progress.getProgr ...

  9. asp.net MVC 和 webForm的区别

    asp.net MVC请求过程 ASP.NET MVC框架只是给开发者提供了开发web应用程序的一种选择,并不是要取代Webform这两种技术各有优缺点,开发者需要根据实际情况,选择对应的技术有时候, ...

  10. android framework 图解分享

    android framework 图解 个人网站:http://www.51pansou.com Android视频下载:Android视频 Android源码下载:Android源码 Androi ...