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

本文主要是介绍使用Ajax向电影票网站展示电影票数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

<!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'},// 获得响应数据resultsuccess: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>