jQuery解析JSON数据

最新推荐文章于 2022-01-18 17:59:12 发布

百家晓东

最新推荐文章于 2022-01-18 17:59:12 发布

阅读量492

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/tianmaxingkong_/article/details/48005257

版权

web前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

［说明］以下以聚合数据提供的网络数据为例使用jquery2.1.4解析JSON数据，并将解析的结果显示在html页面，在使用聚合数据之前需要首先在其网站注册登录，获得相关拉取数据的权限以及appkey。

首先（接口相关信息）：

请求示例：http://v.juhe.cn/movie/index?key=您申请的key&title=功夫

［JSON数据］

{
    "resultcode": "200",
    "reason": "成功的返回",
    "result": [
        {
            "movieid": "133175",
            "rating": "-1",
            "genres": "动画/短片/喜剧",
            "runtime": "2 min",
            "language": "无",
            "title": "小鹿斑比遇见哥斯拉",
            "poster": "http://v.juhe.cn/movie/img?14923",
            "writers": "Marv Newland",
            "film_locations": "加拿大",
            "directors": "Marv Newland",
            "rating_count": "7",
            "actors": "",
            "plot_simple": "null",
            "year": "1969",
            "country": "加拿大",
            "type": "null",
            "release_date": "20090418",
            "also_known_as": ""
        },
        {
            "movieid": "76543",
            "rating": "-1",
            "genres": "科幻",
            "runtime": "108 min / USA:106 min",
            "language": "日语",
            "title": "哥斯拉大战太空哥斯拉",
            "poster": "http://v.juhe.cn/movie/img?108999",
            "writers": "柏原宽司,Kanji Kashiwa",
            "film_locations": "日本",
            "directors": "山下贤章",
            "rating_count": "8",
            "actors": "小高惠美 Megumi Odaka,桥爪淳 Jun Hashizume,米山善吉 Zenkichi Yoneyama,柄本明 Akira Emoto",
            "plot_simple": "null",
            "year": "1994",
            "country": "日本",
            "type": "null",
            "release_date": "19941210",
            "also_known_as": ""
        }
    ],
    "error_code": 0
}

index.html

<body>

输入要查看的电影名称:<input id="id_input" type="text" style="font-size: 23px; text-align: center"/>
<input id="id_search" type="button" value="开始搜索" style="padding: 10px; font-size: 32px"/><br/>
<p id="id_show_movieInfo"></p>

</body>

index.js

$(document).ready(function(){
$('#id_search').on("click", searchMovieInfos);
});

function searchMovieInfos(){
var url = 'http://v.juhe.cn/movie/index';
var title = $('#id_input').val();
$.getJSON(url + "?callback=?",
{
"key": "自己申请的appkey",
"title":title
}, function(data){
var resultcode = data.resultcode;
if(resultcode == "200"){
var strResult = "<table border='1' cellspacing='0'><tr><th>基本信息</th><th>影片详情</th><th>相关信息</th><th>影片剧情</th><th>影片海报</th></tr>";
$.each(data.result, function(i, item){
strResult += "<tr><td><ul><li>ID:" + item.movieid + "</li><li>名称:" + item.title + "</li><li>导演:" + item.directors + "</li><li>别名:" + item.also_known_as + "</li><li>语言:" + item.language + "</li><li>发布时间:" + item.release_date + "</li></ul></td>"
+ "<td><ul><li>名称:" + item.title + "</li><li>类型:" + item.genres + "</li><li>语言:" + item.language + "</li><li>时长:" + item.runtime + "</li><li>地区:" + item.film_locations + "</li><li>别名:" + item.also_known_as + "</li><li>发布时间:<br/>" + item.release_date + "</li></ul></td>"
+ "<td><ul><li>导演:" + item.directors + "</li><li>作者:" + item.writers + "</li><li>演员:" + item.actors + "</li><li>评分:" + item.rating + "</li><li>参评人数:" + item.rating_count + "</li></ul></td>"
+ "<td>" + item.plot_simple + "</td><td><image src=" + item.poster + "/></td></tr>";
});
strResult += "</table>";
alert("搜索成功!");
document.getElementById('id_show_movieInfo').innerHTML = strResult;
}else{
alert(data.reason);
}
});

}

［说明］

$.getJSON() : 获得JSON数据类型，可传入三个参数，第一个是url+"?callback=?"，url为拉取数据的url，callback说明后面的第三个参数为回调函数，在回调函数中就可以解析JSON数据；第二个使用大括号包裹，里面传入url的参数，如：

{
"key": "自己申请的appkey",
"title":title
}

第三个参数就是拉取JSON数据成功之后的回调函数，在这个函数中解析JSON的数据，从上面的举例中，可以看到该回调函数中的参数data，就是用来解析的网络数据的JSON-Object，JSON数据中的JsonObject可以使用 . 号直接获得，JsonArray的获得是通过如下一个函数获得：

$.each(data.result, function(i, item){

var movieid = item.movieid; // item为JsonArray中每一个JsonObject

var directors = item.directors; // i 为JsonArray中Object的下标

});

result为一个JsonArray，data是包含result的JsonObject。

下面为效果图：