json数据获取(Ajax)并展示

json数据获取(Ajax)并展示

豆瓣电影json数据 --Ajax获取并展示到页面

//1.运用Ajax通用get向https://douban.uieee.com/v2/movie/coming_soon请求数据
//2.处理json数据
//3.将请求到的json数据渲染到页面
    //3.1.HTML5的字符拼接(当要拼接的innerHtml涉及其它操作,最好使用创建dom节点的方式)

效果图:

JS代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>豆瓣推荐电影</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        img {
            height: 150px;
            width: 120px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="col-xs-8 col-xs-push-2">
        <ul class="list-group" id="list-array">
            <h2 id="msg" align="center" style="margin:20px auto">获取加载JSON可能会有些慢，请耐心等待几秒...</h2>
        </ul>
    </div>
</div>
</body>
<script>
    //1.运用Ajax通用get向https://douban.uieee.com/v2/movie/coming_soon请求数据
    //2.处理json数据
    //3.将请求到的json数据渲染到页面
    //3.1.HTML5的字符拼接(当要拼接的innerHtml涉及其它操作,最好使用创建dom节点的方式)
    var listArray = document.getElementById("list-array");
    var msg = document.getElementById('msg');

    //添加页面电影信息
    function renderMovie(data) {
        listArray.removeChild(msg);//删除（并返回）当前节点listArray的指定子节点msg
        //data.xx都是获得json数据里面的属性值
        // 获取豆瓣api中有效的电影总数据
        var subjects = data.subjects;

        //获取每一条电影信息并绚染
        for (var i = 0; i < subjects.length; i++) {

            //电影海报
            var poster = subjects[i].images.small;

            var movieName = subjects[i].original_title;

            var casts = '主演：';
            subjects[i].casts.forEach((value) => {
                casts += (value.name + '、');
            });
            casts=casts.substring(0, casts.length-1);

            var genres = '类型：';
            subjects[i].genres.forEach((value) => {
                genres += (value + ' 、');
            });
            genres=genres.substring(0, genres.length-1);

            var pubdates = '上映时间：' + subjects[i].pubdates[0];

            var directors = '导演：';
            subjects[i].directors.forEach((value) => {
                directors += value.name + '、';
            });
            directors=directors.substring(0, directors.length-1);

            //每个完整数据之间用创造bom节点的方式去拼接
            var li = document.createElement("li");
            li.className = 'list-group-item';

            //拼接电影信息
            var movieData =
                '<div class="media">\n' +
                '                        <div class="media-left media-middle">\n' +
                '                            <a href="#">\n' +
                '                                <img class="media-object" src="' + poster + '">\n' +
                '                            </a>' +
                '                        </div>\n' +
                '                        <div class="media-body">\n' +
                '                            <h3 class="media-heading">' + movieName + '</h3>\n' +
                '                            <p>' + casts + '</p>\n' +
                '                            <p>' + genres + '</p>\n' +
                '                            <p>' + pubdates + '</p>\n' +
                '                            <p>' + directors + '</p>\n' +
                '                        </div>\n' +
                '        </div>';

            li.innerHTML = movieData;

            //添加li节点
            listArray.append(li);
        }

    }

    //ajax中get请求通用写法
    function ajax(url, method, renderSome) {
        if (!url.trim()) {
            return;
        }

        // 初始化异步请求的对象
        var xhr = new XMLHttpRequest();

        // 监听请求过程状态的变化
        xhr.onreadystatechange = function () {
            // 服务器端放回了数据，并且数据正确
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 将字符串转换为json的数组
                var arry = JSON.parse(xhr.responseText);
                renderSome(arry);//方法作为参数回调,
                // location.href = '三级联动案例.html'//可以到达下一个界面
            }
        }

        //如果用户名没有传入 method, 默认走GET
        if (!method || 'GET' == method.toUpperCase()) {
            // 初始化请求
            xhr.open('GET', url);
            // 发送请求
            xhr.send();
        }
    }

    ajax('https://douban.uieee.com/v2/movie/coming_soon', null, renderMovie);//1.想服务器请求数据  2.请求方式  3.请求数据成功后的处理方法
</script>
</html>
posted @ 2020-04-29 22:45  JerryMouseJDK  阅读(2187)  评论(0)  编辑  收藏  举报