<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

        <style type="text/css">

                *{

                    padding: 0;

                    margin: 0;

                }

                body{

                    font-family: "宋体";

                }

                .conut{

                    height: 50px;

                }

                .conut span{

                    font-size: 18px;

                    padding: 0 15px;

                    line-height: 50px;

                    color: #009966;

                }

                .movieList{

                    border-top:2px solid #096;

                }

                .movieList li{

                    display: inline-block;

                    padding:0 30px;

                    line-height: 36px;

                    font-size: 14px;

                    border-right:1px solid #FFF ;

                    color: #666;

                    cursor: pointer;

                }

                .movieList li:hover{

                    color: #009966;

                }

                .movie{

                    width: 500px;

                    margin: 0 auto;

                    margin-top: 200px;

                    text-align: center;

                    color: #096;

                }

        </style>

    </head>

    <body>

        <div class="conut">

            <span>正在上映</span>

            <span>(20)</span>

        </div>

        <ul class="movieList">

            <!--<li>战狼2</li>

            <li>机器人9号</li>

            <li>蜘蛛侠·英雄归来</li>

            <li>敦伦克尔</li>

            -->

        </ul>

        <div class="movie">

        </div>

    </body>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>

    <script>

        var apiURL  = "http://api.douban.com";

        var movieApi = {

                        inTheaters:"/v2/movie/in_theaters",//正在热映

                        comingSoon:"/v2/movie/coming_soon",//即将上映

                        moviedetail:"/v2/movie/subject/"   //电影条目信息

                       }

        $(function(){

             $.ajax({

                 type:"get",

                 url:apiURL+movieApi.inTheaters,

                 data:{

                 },

                 dataType:"jsonp",

                 async:true,

                 success:function(data){

                     //console.log(data)

                     $(".conut span").first().html(data.title);

                     $(".conut span").last().html("("+data.count+")");

                     var movieItem="";

                     $.each(data.subjects, function(i,item) {

                         movieItem+="<li data-itemid="+escape("电影"+item.id)+">"+item.title+"("+item.year+")</li>";

                         /*var escapes = escape(item.title);  //escape 转码

                         console.log(escapes);

                         var   unescapes = unescape(escapes); //unescape 解码

                         console.log(unescapes);*/

                     });

                     $(".movieList").empty().append(movieItem);

                 }

             });

        })

        $(".movieList").on("click","li",function(e){

            var data_itemId =unescape($(this).attr("data-itemid"));

            var itemid =  data_itemId.substring(2,data_itemId.length)

            $.ajax({

                type:"get",

                url:apiURL+movieApi.moviedetail+itemid,

                dataType:'jsonp',

                async:true,

                success:function(data){

                    console.log(data);

                    var movie = "<img  src="+data.images.medium+"/><h1>"+data.title+"</h1>"

                    $(".movie").empty().append(movie);

                },

                error:function(xhr,em,e){

                    if(xhr.status == 404){

                        $(".movie").empty().append("<div style='text-align:center'>该电影已下架</div>")

                    }

                }

            });

        })

    </script>

</html>

》》豆瓣API的更多相关文章

  1. 一个豆瓣API的使用——拒绝思维定式

    好久没写博客了,最近一直在用豆瓣API爬数据,不知道以前的是什么样,毕竟刚开始用没多久,就用最新的V2版本,以前的不更新了,可以参照https://developers.douban.com/wiki ...

  2. 小试牛刀--利用豆瓣API爬取豆瓣电影top250

    最近得赶进度爬点东西,对于豆瓣,它为开发者提供了API,目前是v2版本,目前key不对个人开放,但是可以正常通过其提供的API获取数据.豆瓣V2版API权限分3类:公开.高级.商务,我们用开放基本数据 ...

  3. 【jquery mobile笔记二】jquery mobile调用豆瓣api示例

    页面主要代码如下 <div data-role="page" id="page1">     <div data-role="hea ...

  4. 使用OAuth2.0访问豆瓣API

    如何计算某个用户的access_token过期时间?开发者可以通过两种方式计算:用户授权时,oauth2/access_token接口返回的expires_in值就是access_token的生命周期 ...

  5. 豆瓣api之OAuth认证

    豆瓣api通过OAuth允许第三方应用访问用户数据,所以OAuth认证就是我们整个project的基础了. OAuth认证听起来挺神秘,其实挺简单的. 现在的大型网站的开放平台的认证几乎都是采用OAu ...

  6. 《云阅》一个仿网易云音乐UI，使用Gank.Io及豆瓣Api开发的开源项目

    CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...

  7. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  8. 豆瓣api开发

    前面有说过豆瓣API的开发,在做一些开源项目的时候,很多时候会用到豆瓣API接口,拿过来做测试,现在只是对豆瓣API开发做一些简单的梳理: 豆瓣API开发的接口: https://developers ...

  9. 豆瓣API接口开发，结合angularJS来做，感觉爽歪歪！

    第一次做还是先说下API 是什么鬼? API : application program interface 应用程序编程接口: 有那些常见的API: webAPI : 通过WEB方式提供结构叫 WE ...

  10. vue调用豆瓣API加载图片403问题

    "豆瓣API是有请求次数限制的”,这会引发图片在加载的时候出现403问题,视图表现为“图片加载不出来”,控制台表现为报错403. 其实是豆瓣限制了图片的加载,我自己用了一个办法把图片缓存下来 ...

随机推荐

  1. filereader api 类型

    filereader类似XMLHttpRequest,只是它用来从文件系统读取文件,提供了不同的方法去读取文件数据:1.readAsText2.readAsDataURL3.readAsBinaryS ...

  2. Three ways to throw exception in C#. Which is your preference?

    There are three ways to 'throw' a exception in C#  C#中有三种抛出异常的方式 Use the throw keyword without an id ...

  3. Scrum Meeting Alpha - 2

    Scrum Meeting Alpha - 2 NewTeam 2017/10/25 地点:新主楼F座二楼 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了大部分api的测试https://gi ...

  4. C++雾中风景１：友元类与面向对象

    因为后续准备入职的公司都希望能转C++,所以最近也是按部就班的开始进行C++的学习.然后这个系列的文章打算探究C++的语言特性,也比较一下不同语言(如Java,Scala,Python,Go)之间的设 ...

  5. selenium切换窗口

    在做网页自动化测试的时候,难免会打开很多个网页,那么,如何在多个窗口之间切换呢? 获取窗口的唯一标识用句柄(handle)表示,因此只需要切换句柄,就可以灵活的在各窗口之间切换. 下面介绍几个方法 c ...

  6. 解决autocad闪退

    1.进入注册表,regedit 2.找到ROOT\installer\Products ,找到以7D2F开头的键值,这里有两个都得删除 3.删除programdata目录下的AutoDesk目录,及f ...

  7. spring AOP 和自定义注解进行身份验证

    一个SSH的项目(springmvc+hibernate),需要提供接口给app使用.首先考虑的就是权限问题,app要遵循极简模式,部分内容无需验证,用过滤器不能解决某些无需验证的方法 所以最终选择用 ...

  8. Java多线程学习之线程池源码详解

    0.使用线程池的必要性 在生产环境中,如果为每个任务分配一个线程,会造成许多问题: 线程生命周期的开销非常高.线程的创建和销毁都要付出代价.比如,线程的创建需要时间,延迟处理请求.如果请求的到达率非常 ...

  9. Golang源码探索(三) GC的实现原理

    Golang从1.5开始引入了三色GC, 经过多次改进, 当前的1.9版本的GC停顿时间已经可以做到极短. 停顿时间的减少意味着"最大响应时间"的缩短, 这也让go更适合编写网络服 ...

  10. iOS开发 关于addChildViewController的理解

    iOS开发 关于addChildViewController的理解 前言 我之前是做Android开发的接触ios开发不到一个月的时间,所以在有些东理解上会不自觉的向Android方向靠拢. 理解 通 ...