<!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. 一条咸鱼的梦--python

    毕业到现在已经有一年多了,或者说已经工作了一年多,这样以一个社会人的说法比较贴切吧.工作的这段时间里,我曾经有无数次的在问我该干什么,我想干什么,这好像一个深奥的哲学问题,好像并不是只有我一个毕业生思 ...

  2. Flexbox 布局教程

    Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 使用 fle ...

  3. MYSQL触发器在PHP项目中用来做信息备份、恢复和清空

    案例:通过PHP后台代码可以将员工的信息删除,将删除的员工信息进行恢复(类似于从回收站中恢复员工信息),并且还可以将已经删除的员工进行清空(类似于清空回复站的功能). 思路:要有一张员工表,还要有一张 ...

  4. C#生成缩略图源码

    先看调用的方法: ).ToUpper())                {                    case "JPG":                      ...

  5. JAVA学习摘要

    JAVA关键字 JAVA数据类型 数据类型的使用实例 JAVA注释的使用 使用文档注释时还可以使用 javadoc 标记,生成更详细的文档信息: @author 标明开发该类模块的作者 @versio ...

  6. python相关资料

    http://blog.jobbole.com/59535/ http://www.nryoung.org/blog/2013/2/28/python-threading/ http://blog.j ...

  7. Java8 方式解决Stream流转其他数组

    Java8 方式解决Stream流转其他数组 一. 题记:原来的List转数组用的是如下方式: example private static void listToStringArray(List l ...

  8. 社群公会GangSDK：程序员入行AI领域需要哪些技能？

    作为一名Android开发工程师,身边总有些同行很焦虑,看着人工智能越来越火,总是担心Android要不行了,所以,我们需要转行么?Android还能走多久?其实,无论是对于Android还是iOS开 ...

  9. 关于vue 框架与后台框架的混合使用的尝试

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  10. 安装memcached

    简介 memcached是免费和开放源代码的高性能分布式内存对象缓存系统,旨在通过减轻数据库负载来加速动态Web应用程序.其有以下特点: 基于简单的文本行协议 全部数据按照k/v形式存放在内存中,无持 ...