Ajax请求数据实现触底刷新_ajax请求的触底加载-CSDN博客

本文链接：https://blog.csdn.net/weixin_44309299/article/details/125626374
<!--原网页地址：https://movie.douban.com/typerank?type_name=%E5%89%A7%E6%83%85&type=11&interval_id=100:90&action=-->
<!--原网页数据接口地址：https://movie.douban.com/j/chart/top_list?type=11&interval_id=100%3A90&action=&start=0&limit=20-->
<!--本地web服务器地址：http://127.0.0.1:5000/douban?page=1-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            list-style: none;
            width: 400px;
            text-align: center;
            margin: 0 auto;
        }

        li {
            width: 80px;
            /* border: 1px solid #000; */
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            text-align: center;

        }

        .box {
            width: 290px;
            margin: 10px;

        }

        img {
            width: 290px;
        }


        .list {
            width: 100%;
            height: 20px;
            line-height: 20px;
            margin-bottom: 10px;
        }

        .title,
        .c2name {
            font-size: 14px;

        }

        .title {
            float: left;
        }

        .c2name {
            float: right;
            color: gray;
        }

        .nn {
            font-size: 12px;
            color: gray;
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="content">
    </div>
    <script>

        var content = document.querySelector('.content');
        var n = 0;
        var flag = true;

        var page = function (n) {
            fetch(`http://127.0.0.1:5000/douban?page=${n}`, {
                method: "get",
            }).then(response => {
                return response.json()
            }).then(d => {
                for (let i of d) {
                    // console.log(i);
                    let box = document.createElement('div');
                    box.classList.add('box'); //父元素
                    content.appendChild(box);
                    box.innerHTML = `
                    <img src="${i.cover_url}">
                    <div class='list'>
                        <div class='title'>${i.title}</div>
                        <div class='nn'>${i.release_date}</div>           
                    </div>`
                    flag = true;
                }
            })
        }
        page(0);
        var n = 0
        window.onscroll = function () {
            let clientHeight = document.documentElement.clientHeight;
            let scrollHeight = document.body.scrollHeight;
            let screenTop = document.documentElement.scrollTop;
            let distance = 50;

            if ((screenTop + clientHeight) >= (scrollHeight - distance) && flag) {
                n++;
                if (n <= 9) {
                    console.log(n);
                    page(n)
                    flag = false;
                }
            }
        }

    </script>
</body>

</html>