<!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>
