使用Ajax向电影票网站展示电影票数据

最新推荐文章于 2021-08-05 19:10:17 发布

大地Orooz

最新推荐文章于 2021-08-05 19:10:17 发布

阅读量563

点赞数

分类专栏：笔记文章标签： js ajax

本文链接：https://blog.csdn.net/weixin_45902973/article/details/115187611

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

目标网页：
在这里插入图片描述

最终效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container{
        width: 800px;
        height: auto;
        border: 1px solid red;
        margin: 0 auto;
    }
    .ele{
        width: 800px;
        height: 200px;
        border: 1px solid green;
        float: left;
    }
    .ele .imgcon img{
        width: 150px;
        height: 200px;
        margin-left: 0;
        float: left;
    }
    .right{
        position: relative;
        left: 10px;
        margin-top: 10px;
    }
    .btn{
        position: relative;
        left: 580px;
        border: 1px solid orange;

    }
    .right #p #sp{
        font-weight: 700;
    }
    #ty{
        background-color: #c9c1c1;
    }
</style>
<body>
<div class="container">
<!--    <div class="ele">-->
<!--        <div class="imgcon">-->
<!--            <img src="img/11.jpg">-->
<!--        </div>-->
<!--        <div class="right">-->
<!--            <p><span>哥斯拉大战金刚</span><span>2D</span></p>-->
<!--            <p>主演：亚当斯</p>-->
<!--            <p><span>美国</span><span>113分钟</span></p>-->
<!--        </div>-->

<!--    </div>-->

</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    //  向 卖座 网站发送请求，获取请求响应数据
    var dataJson={"cityId":"410100","pageNum":1,"pageSize":26,"type":1,"k":"7225949"};
    //https://m.maizuo.com/gateway?cityId=410100&pageNum=1&pageSize=10&type=1&k=7225949
    $.ajax({
        url:'https://m.maizuo.com/gateway',
        data:dataJson,
        type: 'GET',
        dataType:'json',
        headers:{
            "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"16165771082645936077537281","bc":"410100"}',
            "X-Host": 'mall.film-ticket.film.list'
        },
        // 获得响应数据result
        success:function(result){
            var str = "";
            // 遍历result结果中的数据
            $.each(result.data.films,function(index,film){


                // var actor = actors[0];
                // 打印信息
                // console.log(film)
                // for (var i=0;i<actors.length;i++){
                //     console.log(actors[i].name)
                //
                // }
                //获取主演
                var actors = film.actors;
                var name = "";
                $.each(actors,function (i,actor) {
                    name+=actors[i].name;
                    name+=",";

                })
                console.log(name)
                str += "<div class='ele'>";
                str += "<div class='imgcon'><img src='"+film.poster+"'></div>"
                str +=
                    "<div class='right'>" +
                    "<p id='p'><span id='sp'>"+film.name+"</span><span id='ty'>"+film.item.name+"</span></p>" +
                     "<p>观众评分："+film.grade+"分</p>"+
                    "<p>主演："+name+"</p>" +
                    "<p><span>"+film.nation+" | </span>" +
                    "<span>"+film.runtime+"分钟</span></p>" +
                    "<button class='btn'>购买</button>" +
                    "</div>"

                str += "</div>"

                //   获取国家
                // console.log(result.data.films.length)
               //  console.log("第"+(index+1)+"个电影")
               // console.log(film.name);
               // // 获取电影名称
               //  console.log(film.nation);
               //  // 获取电影封面图片
               //  console.log(film.poster)
               //  // 获取电影时长
               //  console.log(film.runtime)
               //  var type = film.item;
               //  console.log(type.name)
                // 长度
               // var length = result.data.films.length;
            })
            $(".container").append(str)
        }

    });

</script>
</body>
</html>