<!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. 【Aladdin Unity3D Shader编程】之一 基本入门

    OpenGL.DirectX以及GLSL.HLSL.CG OpenGL和DirectX是图像应用编程接口,用于渲染二维或者三维图形. GLSL着色语言是用来在OpenGL中着色编程的语言,有点在于跨平 ...

  2. display: run-in

    If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box ...

  3. 微信公众平台快速开发框架 For Core 2.0 beta –JCSoft.WX.Core 5.2.0 beta发布

    写在前面 最近比较忙,都没有好好维护博客,今天拿个半成品来交代吧. 记不清上次关于微信公众号快速开发框架(简称JCWX)的更新是什么时候了,自从更新到支持.Net Framework 4.0以后基本上 ...

  4. 几种移动app API调用认证方案浅析

    最近做的金融项目,app调用的接口需要做一个身份认证,所以找了下目前API services验证的几种方式.之前翻译的一篇文章--[译]移动API安全终极指南中,主要提出了API服务调用验证的问题,通 ...

  5. 前端基于react,后端基于.net core2.0的开发之路（2） 开发环境的配置，注意事项，后端数据初始化

    前端环境配置 项目介绍文章:前端基于react,后端基于.net core2.0的开发之路(1) 介绍 1.VSCode安装 下载地址:https://code.visualstudio.com/Do ...

  6. Java _分页Jdbc 版

    人生得意须尽欢,莫使金樽空对月. 先天下之忧而忧,后天下之乐而乐. 大东北的天气已经渐入佳境了,在夜深人静的时候,随着鼠标的移动,键盘清脆的声音,开启了今天的睡前代码工程!今天聊聊JDBC版本的分页, ...

  7. c#关键字及ref和out

    最近在写程序时遇到ref,out 参数问题.回头有自习看了看MSDN,才有巩固了基础.我把我的测试程序贴出来,大家分享一下.    ref 关键字使参数按引用传递.其效果是,当控制权传递回调用方法时, ...

  8. [转载] Netty教程

    转载自http://blog.csdn.net/kobejayandy/article/details/11493717 先啰嗦两句,如果你还不知道Netty是做什么的能做什么.那可以先简单的搜索了解 ...

  9. CLR类型设计之方法与构造器

    无论学习那门语言都要学习函数体,C#,JAVA,PHP,都会涉及到函数体,而C#的函数体成员并不少,方法和构造器就是函数体成员之一,函数体成员还包括但不限于:方法,属性,构造器,终结器,运算符及索引器 ...

  10. mysql数据库第二弹

    mysql数据库针对表的操作 表记录的增删改查 1.增加一张表 插入记录之前必须得先有表结构! CREATE TABLE score( id int PRIMARY KEY auto_incremen ...