<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 解决防盗连 -->
<meta name="referrer" content="never">
<title>Document</title>
<style>
.main {
width: 1550px;
/* border: solid 1px black; */
text-align: center;
margin: 10px auto;
padding: 20px;
position: relative;
}
#keywords {
width: 500px;
height: 40px;
border: solid 1px pink;
border-radius: 10px;
outline: none;
font-size: 20px;
color: black;
padding-left: 10px;
}
#search {
width: 160px;
height: 40px;
border: solid 1px red;
border-radius: 10px;
outline: none;
font-size: 20px;
color: red;
padding-left: 10px;
cursor: pointer;
background: #fff;
}
ul li {
list-style: none;
width: 300px;
height: auto;
float: left;
}
img {
width: 100px;
height: 150px;
}
.img {
position: absolute;
left: 0;
width: 150px;
height: 150px;
}
.info {
position: absolute;
right: 0;
width: 150px;
height: 150px;
text-align: left;
}
.movie {
position: relative;
width: 300px;
height: 120px;
margin: 10px 10px 10px 10px;
}
span {
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<span>请输入需要展示电影个数(默认25个):</span>
<input type="text" name="" id="keywords">
<button id="search" autocomplete="off">显示</button>
<ul id="ul">
</ul>
</div>
<script type="text/javascript" src="http://study.zyjblogs.cn/web/js/jquery-3.5.1.js"></script>
<script>
$("#search").click(function() {
//异步Ajax请求
//跨域请求:采用jsonp方式解决
//服务器返回的是json对象
/*
* json值:任何类型
* json对象:{k:v,k:v,k:v}
* json数组:[v1,v2,v3] [{k:v,k:v,k:v},{k:v,k:v,k:v},{k:v,k:v,k:v}]
*/
//可用api http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=0&count=10
var keyword = $("#keywords").val();
if (keyword == "") {
keyword = "25"
} else if (keyword > 250 || keyword <= 0) {
alert("请输入0-250之间的数")
return false;
}
$.ajax({
type: "get",
url: "https://api.douban.com/v2/movie/top250?apikey=0b2bdeda43b5688921839c8ecb20399b&start=0&count=" + keyword,
dataType: "jsonp",
success: function(data) {
console.log(data);
// //局部更新页面数据
// $("#title").html(res.title);
// $("#summary").html(res.summary);
// $("#image").attr("src", res.images.medium)
for (let i = 0; i < data.subjects.length; i++) {
let title = data.subjects[i].title;
let rating = data.subjects[i].rating.average;
let genres = data.subjects[i].genres;
let img = data.subjects[i].images.small;
let casts = data.subjects[i].casts[0].name;
$("ul").append(`
<li>
<div class="movie">
<div class="info">
电影名:${title}<br /><br />
评分:${rating}<br /><br />
演员:${casts}<br /><br />
类别:${genres}<br /><br />
</div>
<div class="img">
<img id="image" src="${img}" alt="${title}"/>
</div>
</div>
<br/>
</li>
`);
}
},
error: function(err) {
alert(err);
}
});
});
</script>
</body>
</html>