》》豆瓣API

<!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>
posted on 2017-12-06 15:55 风过无涟漪阅读(172) 评论(0) 收藏举报