使用jQuery解析json

2020-12-14 02:40:57 编辑 2 阅读量:451

在使用ajax的过程中，往往有许多数据是json格式的，所以在处理的时候有必要把json格式的字符串转换为字典，方法有三种：
    一、在使用ajax时置顶dataType（最简单的方法）

```javascript
$.ajax({
        type: "GET",
        url: target_url,
        dataType: 'json',
        success: function(data){
            var error_code = data.error_code;
            var likes_num = data.likes;
            if (error_code == 0)
                likes.text(likes_num);
            else if (error_code == -3)
                alert('您已赞过');
            //var dictdata = $.parseJSON(data);
            //console.log(dictdata.error_code);
        },
        error: function(data){
            alert("500 Server Error");
        }
    });
```

二、使用paraseJSON函数

```javascript
$.ajax({
        type: "GET",
        url: target_url,
        success: function(data){
            var data = $.parseJSON(data);
            console.log(data.error_code);
            var error_code = data.error_code;
            var likes_num = data.likes;
            if (error_code == 0)
                likes.text(likes_num);
            else if (error_code == -3)
                alert('您已赞过');
        },
        error: function(data){
            alert("500 Server Error");
        }
    });
```

三、使用jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )
    下面引用的是官方API对$.getJSON()的说明：

```javascript
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数据的方法，下面是官方文档：

```javascript
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的解析就迎刃而解咯。(*^__^*) 嘻嘻……

```javascript
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“)。

部分引用自：http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html

使用jQuery解析json

附件: