<!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. scrolling 优化 避免卡顿

    让我们来瞧瞧在滚动时到底发生了什么.在理解这个问题之前,我们先简要的介绍下浏览器是如何向屏幕绘制内容的.这一切都是从 DOM 树(本质上就是页面中的所有元素)开始的.浏览器先检查拥有了样式的 DOM, ...

  2. Python-数据类型-转摘

    1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和(2.3-4. ...

  3. mac电脑安装apache，不能启动

    因为mac系统是自带apach的 如果安装正确还是不能启动,有可能是 mac电脑自带apache功能,与安装的apache冲突. 这样关闭Mac自带apach即可. mac电脑apache命令:重启a ...

  4. 史上最完整的PS快捷键（绝对经典）

    快速恢复默认值 有些不擅长Photoshop的朋友为了调整出满意的效果真是几经周折,结果发现还是原来的默认效果最好,这下傻了眼,后悔不该当初呀!怎么恢复到默认值呀?试着轻轻点按选项栏上的工具图标,然后 ...

  5. 30.Linux-RTC驱动分析及使用

    linux中的rtc驱动位于drivers/rtc下,里面包含了许多开发平台的RTC驱动,我们这里是以S3C24xx为主,所以它的RTC驱动为rtc-s3c.c 1.进入./drivers/rtc/r ...

  6. Python ---------- Tensorflow (二）学习率

    假设最小化函数 y = x2 , 选择初始点 x0= 5 1. 学习率为1的时候,x在5和-5之间震荡. #学习率为1 import tensorflow as tf training_steps = ...

  7. 什么是Node.js?带你初识Node

    什么是Node.js Nodejs是一个基于Chrome v8引擎的JavaScript运行环境 Node.js使用了一个事件驱动,非阻塞式I/O的模型,使其轻量又高效. Node.js 的包管理器 ...

  8. .NET自带缓存机制实例

    using System;using System.Web;using System.Web.Caching;using System.Collections.Generic;using System ...

  9. Nodejs学习笔记（十六）--- Pomelo介绍&入门

    目录 前言&介绍 安装Pomelo 创建项目并启动 创建项目 项目结构说明 启动 测试连接 聊天服务器 新建gate和chat服务器 配置master.json 配置servers.json ...

  10. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...