简单使用ajax获取豆瓣top250电影并显示

<!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>
简单使用ajax获取豆瓣top250电影并显示

猜你喜欢
