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>