<!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. jsonp跨域实现

    原理:借助script可以跨域的思想,将跨域请求放在script中,当页面解析到改script标签时,就会向该src指向的地址发出一个请求,达到跨域请求的目的. 两点:(1)主要是利用了 <sc ...

  2. Redis的使用初探

    Redis Redis将其数据库完全保存在内存中,仅使用磁盘进行持久化. 与其它键值数据存储相比,Redis有一组相对丰富的数据类型. Redis可以将数据复制到任意数量的从机中 Redis的安装 官 ...

  3. ML技术 - 特征选择

    1. 决策树中的特征选择 分类决策树是一种描述对实例进行分类的树型结构,决策树学习本质上就是从训练数据集中归纳出一组分类规则,而二叉决策树类似于if-else规则.决策树的构建也是非常的简单,首先依据 ...

  4. c#DES加密解密代码

    //加密  public string DesEncrypt(string strText, string strEncrKey)   {    byte[] byKey=null;    byte[ ...

  5. [转载] 详述三种现代JVM语言--Groovy，Scala和Clojure

    转载自http://www.tuicool.com/articles/jYzuAv和http://www.importnew.com/1537.html 在我与Martin Fowler曾经合作呈现的 ...

  6. flex词法解析

    例子1.从标准输入的字数.单词.行数统计 %{ #include <string.h> int chars = 0; int lines = 0; int words = 0; %} %% ...

  7. Api管理工具（spring-rest-docs）

    对于app开发来说,必须需要有相应的api文档,一般最基础的就是用markdown工具来撰写api文档.当对于开发人员来说,是总会想着寻找更方便撰写,测试,对接前端开发的文档生成的工具. 其实这方面的 ...

  8. shell脚本 案例

    1,写一个循环,ping整个子网的ip.   使用while循环 #!/bin/bash  ip=223  while [ "$ip" -ne "239" ] ...

  9. SQL Server 初识游标

    ---恢复内容开始--- 游标:游标是一种能从包含多个数据的结果集每次提取一条的机制 游标的特点是: 检索得到的数据集更加灵活 可有针对性的对数据进行操作 拥有对数据进行删除和更新的能力 为何使用游标 ...

  10. Entity Framework——常见报错总结

    1 实体属性配置为IsRequired()对更新的影响 抛出异常类型DbEntityValidationException 表结构: 实体: public class User { public in ...