Ajax请求电影列表

已于 2022-03-09 14:58:44 修改
阅读量476 收藏 1
点赞数
文章标签： ajax css css3
于 2022-03-02 20:35:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67084957/article/details/123239482
版权 
  <style>
        * {
            margin: 0;
            padding: 0;
        }

        :root {
            --theme: red;
        }

        .content {
            width: 1200px;
            margin: 0 auto;
            padding-top: 30px;

        }

        .nav {
            display: flex;
            justify-content: center;
        }

        .nav-item {
            width: 120px;
            line-height: 60px;
            border: 1px solid var(--theme);
            margin: 0 20px;
            text-align: center;
        }

        .nav-item.act {
            background-color: var(--theme);
            color: #fff;
        }

        .page {
            display: flex;
            flex-wrap: wrap;
        }

        .page span {
            width: 40px;
            line-height: 20px;
            border: 1px solid var(--theme);
            margin: 10px 10px;
            text-align: center;
        }

        .page span.act {
            background-color: var(--theme);
        }

        .main {
            display: flex;
            flex-wrap: wrap;
            margin-top: 50px;

        }

        .main .item {
            float: left;
            width: 22%;
            height: 200px;
            border: 1px solid #333;
            margin: 2% 1%;
            font-size: 14px;
        }

        .main .item img {
            float: left;
            width: 50%;
            height: 100%;
        }

        .mask {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
        }

        .mask-content {
            width: 400px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            overflow: hidden;
            font-size: 14px;
        }

        .loading {
            display: none;
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .loading span {
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }

        @-webkit-keyframes load {

            0%,
            100% {
                height: 40px;
                background: lightgreen;
            }

            50% {
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }

        .loading span:nth-child(2) {
            -webkit-animation-delay: 0.2s;
        }

        .loading span:nth-child(3) {
            -webkit-animation-delay: 0.4s;
        }

        .loading span:nth-child(4) {
            -webkit-animation-delay: 0.6s;
        }

        .loading span:nth-child(5) {
            -webkit-animation-delay: 0.8s;
        }
    </style>
<body>
    <div class="content">
        <div class="nav">
            <div data-type="hot" class="nav-item act">
                正在上映
            </div>
            <div data-type="will" class="nav-item">
                即将上映
            </div>
            <div data-type="top" class="nav-item">
                top250
            </div>

        </div>

        <div class="page">
            <span>1</span>
            <span>2</span>
            <span>3</span>

        </div>
        <div class="main">
            <div class="item">
                <img src="" alt="">
                <p>名称</p>
                <p>时长</p>
                <p>类型</p>
                <p>平均分</p>
                <p>编剧</p>
                <p>导演</p>
            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>
            <div class="item">

            </div>

        </div>
        <!-- 蒙层  -->
        <div class="mask">
            <div class="mask-content">
                <!-- <div class="text">
                    电影简介
                </div> -->
            </div>
            <div class="loading">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

        </div>
    </div>

<script>
        //渲染页面
        // var xhr = new XMLHttpRequest();
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         var res = JSON.parse(xhr.response).data;
        //         console.log(res);
        //         //渲染分页器
        //         var pagestr = ''
        //         for (var j = 1; j <= res.totalPage; j++) {
        //             pagestr += `<span>${j}</span>`
        //         }
        //         $('.page').html(pagestr);
        //         //渲染内容
        //         var str = '';
        //         for (var i = 0; i < res.list.length; i++) {
        //             str += `<div class="item">
        //         <img src="${res.list[i].large}"" alt="">
        //         <p>名称:${res.list[i].title}</p>
        //         <p>时长:${res.list[i].longtime}</p>
        //         <p>类型:${res.list[i].subtype}</p>
        //         <p>平均分:${res.list[i].rating_average}</p>
        //         <p>编剧:${res.list[i].scriptwriter}</p>
        //         <p>导演:${res.list[i].director}</p>
        //     </div>`
        //         }
        //         $('.main').html(str);
        //     }
        // }
        // xhr.open('GET', 'http://www.bufantec.com/api/douban/movie/in_theaters');
        // xhr.send(null);


        //初始化页面
        get(api.hot, render);


        //绑定导航的点击事件
        $('.nav').on('click', '.nav-item', function () {
            var type = $('.nav-item.act').attr('data-type');
            $(this).addClass('act').siblings().removeClass('act');
            console.log(type);
            get(api[type], render)
        })

        //分页器点击事件
        $('.page').on('click', 'span', function () {
            // 
            var type = $('.nav-item.act').attr('data-type');
            console.log(type);
            //点击的span页码,获取此时从哪一页开始
            var num = $(this).text();
            get(api[type] + `?start=${num}&limit=10`, render)
        })


        //点击卡片出现蒙层
        $('.main').on('click', '.item', function () {
            $('.mask').fadeIn().children('.mask-content').hide().next().show();
            var id = this.dataset.id;
            get(api.desc + `?mId=${id}`, function (res) {
                // 关闭loading 
                $('.loading').hide().prev().show();
                // 生成内容简介
                console.log(res);
                $('.mask-content').html(`<div class="text">
                    ${res.summary}
                </div>`)
            })
        })

        //点击蒙层消失
        $('.mask').click(function () {
            $(this).hide()
        })





        //封装请求
        function get(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var res = JSON.parse(xhr.response).data;
                    // console.log(res);
                    callback(res)
                }
            }
            xhr.open('GET', url);
            xhr.send();
        }

        //封装渲染页面
        function render(res) {
            //渲染分页器
            var pagestr = ''
            for (var j = 1; j <= res.totalPage; j++) {
                pagestr += `<span>${j}</span>`
            }
            $('.page').html(pagestr);
            //当前页数高亮
            // pageNumber属性表示当前页码
            $('.page span').eq(res.pageNumber - 1).addClass('act').siblings().removeClass('act');
            //渲染内容
            var str = '';
            for (var i = 0; i < res.list.length; i++) {
                str += `<div data-id="${res.list[i].mId}" class="item">
                <img src="${res.list[i].large}"" alt="">
                <p>名称:${res.list[i].title}</p>
                <p>时长:${res.list[i].longtime}</p>
                <p>类型:${res.list[i].subtype}</p>
                <p>平均分:${res.list[i].rating_average}</p>
                <p>编剧:${res.list[i].scriptwriter}</p>
                <p>导演:${res.list[i].director}</p>
            </div>`
            }
            $('.main').html(str);
        }
    </script>

<script src="js/jquery-3.3.1.min.js"></script>(此文件是一个jquery插件,需要自行去网上下载)

    <script src="js/api.js"></script>(此js文件的内容是整理的api.内容如下:

var host = 'http://www........'

var api = {

    hot: host + '.........',

    will: host + '........',

    top: host + '.......',

    desc: host + '......'

}

)

白柚Y
关注
爬取ajax加载的豆瓣电影
百雨的博客
04-26 1059
（一）前提：找到ajax异步加载的包接口，注意第一个电影名 我们把Request URL网址复制到地址栏得到： 上图是json格式数据，且第一个电影一致，说明我们找到了正确的ajax的json接口 出现加载更多之前是20部电影，点击加载更多，我们会得到第二个json包，里面是另外20个电影。 （二）爬取豆瓣中美剧分类的电影200个第一种方式（最后优化）： 多加载几个j...
ajax请求数据并渲染页面
weixin_49596018的博客
12-14 1336
<!DOCTYPE html> <html lang="en"> <style> span { display: inline-block; width: 100px; height: 30px; border: 1px solid red; line-height: 30px; text-align: center; font-size: 10px;
Ajax爬取豆瓣电影目录（Python）
weixin_34337381的博客
05-04 267
下面的分析相当于一个框架，搞懂之后，对于类似的文字爬取，我们也可以实现。就算不能使用Ajax方法，我们也能够使用相同思想去爬取我们想要的数据。 豆瓣电影排行榜分析 网址：https://movie.douban.com/explore#!type=movie&tag=%E7%83%AD%E9%97%A8&sort=recommend&page_limit=20&a...
用Ajax获取网通电影列表。
weixin_30575309的博客
03-21 197
周末没事，在重庆网通看连续剧，不过他没有提供一个很好的列表页面，一个列表页面没有提供翻页功能，只有700个电影列表，不能看到以前的连续剧。一个页面有翻页，但是每页只有10个影片，连续剧有200多个页面，要看以前的连续剧也要翻页很多次，在 [原创]Ajax基本原理讲解 里面的程序的基础上修改了一下，获取了所以连续剧的列表，方便观看。大致原理如下： 用xmlhttp获取第一页源文...
Ajax请求合集
qq_38686150的博客
07-18 235
AjAx 的特点 优点 可以无需刷新页面与服务器进行通信 允许你根据用户事件来更新部分页面内容 缺点 没有浏览历史 不能回退 存在跨域问题（同源） SEO 不友好 请求报文 重点是格式和参数 请求体 响应体 gei 请求 参数 post 请求体参数 Ajax的使用 // 创建对象 const xhr = new XMLHttpRequest() // 初始化 设置请求方法和 url xhr.open("GET","http://127.0.0.1:800
初识ReactJS的组件化开发(三):利用ajax渲染电影列表
07-30 4319
我们使用zepto库来做ajax请求 安装zepto： 1.cd到项目根目录 2.执行 npm install zepto 然后发现我们的项目中就多了 因为ajax是异步的，所以我们要想成功把数据后期渲染，就必须了解reactJS组件的声明周期了。《reactJS基础学习篇》 初识reactJS的组件化开发(一)：简单封装 var navBar = react.createClass(
python爬虫 基于requests模块发起ajax的get请求实现解析
09-18
通过具体的实例，我们将探讨如何获取豆瓣电影分类排行榜中的电影详情数据，其中包括使用抓包工具分析AJAX请求、定制请求头信息、以及处理响应数据。 ### Python爬虫基础 Python爬虫是指使用Python语言编写的程序，...
ajax的get请求源码
02-22
### AJAX GET 请求解析 #### 一、概述 Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它能够使网页实现局部刷新，而无需重新加载整个页面。本篇文章将通过一个具体的示例来深入分析 ...
urllib的ajax的get请求豆瓣电影前10页
最新发布
03-22
爬虫课程随堂记-----------b站尚硅谷老师
ajax的get请求豆瓣电影第一页.py
01-23
python
小程序开发过程中问题一：通过云函数向豆瓣电影列表API接口请求数据的时候很多人会遇到的问题
5G工业互联网
08-03 1881
谨记：每次修改云函数后，都要重新上传并部署！！！ 首先，初学者会遇到的问题是显示 console.err is not function，为什么，先别问为什么，直接把console.err改成console.error，然后再看问题，通常如我，因为每次修改云函数之后并没有上传并部署，所以再次编译，还是同样的问题，所以没有上传部署，你再怎么改，你的云函数都是运行你上一次上传的云函数，与现在编辑窗体...
电影网站数据的爬取-Ajax+动态渲染
PorterZhang的博客
05-30 1158
本系列可能是一个比较长的系列，主要是对《Python3网络爬虫开发实战》前七章的一个内容总结并且熟悉使用一下相关的框架与技术。
使用Ajax异步请求实现省市联动下拉列表
k_achu的博客
05-26 760
前后端交互：使用Ajax发送异步请求使得省市下拉列表的动态展示
jq+ajax请求本地数据加载商品列表页并跳转详情页
web_hwg的博客
07-12 1万+
效果：json文件：{ "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":"崇贤馆始置唐代太宗朝。1999年，李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化，提供全新国学体验馆为宏愿。"},
通过AJAX获取数据列表
weixin_41218855的博客
07-05 2611
前端代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过AJAX获取数据列表</title> <style> * { margin: 0; ...
js + ajax实现列表页到详情页的跳转
qq_41038929的博客
10-29 8935
思路是：点击列表页时，把id传给详情页，在详情页接收列表页传递过来的id，并赋到data中。 第一步：列表页传参数id： 第二步： //获取url中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); //构造一个含有目标参数...
ajax请求返回List
热门推荐
进化的深山猿
11-06 1万+
后端代码（注意红色部分） @RequestMapping(value="/getJobByLevel.action", method = RequestMethod.POST) public @ResponseBody Object getJobByLevel( @RequestBody Map&lt;String,String&gt; queryConditionMap) { Lis...
Python实现Ajax GET请求及数据保存
本文主要介绍了如何使用Python的`urllib.request`模块实现一个简单的AJAX GET请求，并将返回的数据保存到本地文件。 在前端开发中，AJAX (Asynchronous JavaScript and XML) 是一种用于创建动态网页的技术，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值