我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。

JSON数据如下,是一个嵌套JSON:

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]}

获取JSON数据,在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数,第一个书返回的数据,第二个是状态,第三个是jQuery的XMLHttpRequest,我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接 受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当 前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#info").html("");//清空info内容         $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" + 
                    "<div>" + item.nickname    + "</div>" +                     "<div>" + item.content + "</div><hr/>");
        });
        });
}

正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对象,在下面 的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包 含的JSON数组:

[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]

$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下:

如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],
"content":"你是木头人,哈哈。","infomap":{"性别":"男","职业":"程序员",
"博客":"http:\/\/www.xxx.com\/codeplus\/"},"title":"123木头人"}

js如下:

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#title").append(data.title+"<hr/>");
        $("#content").append(data.content+"<hr/>");
        //jquery解析map数据
        $.each(data.infomap,function(key,value){
            $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
        });
        //解析数组
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" + 
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div><hr/>");
        });
        });
}

值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。

转载于:https://www.cnblogs.com/sjqq/p/6400434.html

深入分析jquery解析json数据相关推荐

  1. JQuery解析JSON数据

    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script&g ...

  2. Jquery解析Json数据,实现级联菜单

    首先这里需要用到jquery,简单的说,jquery就是javascript的一些库,极大的简化了js的代码.我用到的是jquery-3.3.1.min.js这个版本的jq,大家可以去官网下载,jso ...

  3. jQuery读取JSON数据(jQuery调用JSON数据学习第二天)

    在初步了解JSON数据格式之后,接下来学习jQuery框架下,如何读取一个JSON数据. 由于JSON格式是JavaScript的原生态格式,因此,使用jQuery访问JSON数据时十分方便的,只需要 ...

  4. wps解析json数据_一些非常实用的JSON 教程

    以下内容来自W3school. JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 ...

  5. java构造和解析json_Java构造和解析Json数据的两种方法详解一

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...

  6. Gson解析JSON数据中动态未知字段key的方法

    转载自:https://blog.csdn.net/jdsjlzx/article/details/76785239 有时在解析json数据中的字段key是动态可变的时候,由于Gson是使用静态注解的 ...

  7. java json解析 代码_Java构造和解析Json数据的两种方法详解一

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...

  8. Java构造和解析Json数据的两种方法详解一

    在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面首先介绍用json-lib构造和解析Jso ...

  9. json解析详解 java_Java解析Json数据的两种方式详解

    JSON数据解析的有点在于他的体积小,在网络上传输的时候可以更省流量,所以使用越来越广泛,下面介绍使用JsonObject和JsonArray的两种方式解析Json数据. 使用以上两种方式解析json ...

最新文章

  1. maven no Maven Dependencies view
  2. 读书笔记《如何阅读一本书》之二
  3. 叮当快药产品体验报告
  4. 设备文件的创建mknod
  5. 两只塔姆沃斯牛 The Tamworth Two
  6. C语言学习之1到10的奇数相乘1到10的偶数相乘
  7. python - 编程规范问题
  8. matlab2c使用c++实现matlab函数系列教程-trace函数
  9. 【数据结构】二叉树的python实现
  10. 对《Java编程思想》读者的一点建议
  11. A Frustratingly Easy Approach for Joint Entity and Relation Extraction(陈丹琦2020)
  12. java公众号图片上传_调用微信公众号接口上传图片素材
  13. 仿支付宝输入密码界面
  14. 乐高计算机游戏泡泡龙的目标,乐高游戏教案
  15. 蜗牛君漫聊设计模式---建造者模式
  16. AlphaControls 控件 编辑皮肤 变更Glyphs控制符号
  17. SOUI自定义控件(1)
  18. 【渝粤教育】电大中专新媒体营销实务 (4)作业 题库
  19. DELPHI HOOK随手笔记
  20. 使用 Python 的铅笔素描图像

热门文章

  1. QT中使用rubberband橡皮筋等方法进行选中多个物体
  2. 那还剩下多少学习激情?
  3. 数据算法算力知识反绎学习
  4. 通俗理解tf.name_scope()、tf.variable_scope()
  5. CodeGen准备存储库
  6. CUDA运行时Runtime(三)
  7. 对抗性鲁棒性与模型压缩:ICCV2019论文解析
  8. 3D-camera结构光原理
  9. java线程触发_java线程
  10. Android 判断某个服务是否正在运行