回调地狱代码和解决回调地狱


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
      
        * {
            padding: 0px;
            margin: 0px;
        }

        .tpl {
            display: none;
        }

        .wrapper {
            overflow: hidden;
            border: 2px solid black;
            width: 600px;
            margin: 100px auto 0px;
        }
        .movieSection {
            float: left;
            width: 180px;
            height: 180px;
            padding: 10px;
        }
        
        .movieSection img {
            width: 100%;
            height: 150px;
            cursor: pointer;
        }

        .movieSection h3 {
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 鍩烘湰缁撴瀯 -->
    <div class="wrapper">
        <div class='tpl'>
            <img src=""></img>
            <h3 class='movieName'></h3>            
        </div>
    </div>     

                                                     
    <script src="./jquery.js"></script>
    <!-- <script src="./myjQuery.js"        ></script> -->
<script>
    // $.ajax({
    //     url: 'https://open.duyiedu.com/jq/movie/power',
    //     type:'POST',
    //     data:{
    //         username:'cst',
    //         password:'123123',
    //     },
    //     success: function(res){
    //         if(res.data.power == 'root'){
    //             // vip网络地址发送请求
    //             $.ajax({
    //                 url: 'https://open.duyiedu.com/jq/movie/movieList',
    //                 type:'GET',
    //                 success:function(res){
    //                     var data = res.data;
    //                     var $Wrapper = $('.wrapper');
    //                     $.each(data,function(index,ele){
    //                         var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
    //                         $MovieSection.data({id:ele.id}).on('click',function(){
    //                             $.ajax({
    //                                 url:' https://open.duyiedu.com/jq/movie/movieInfo',
    //                                 type:'GET',
    //                                 data:{
    //                                     movieId:$(this).data('id')
    //                                 },
    //                                 success:function(res){
    //                                     var data = res.data;
    //                                     var direct = data.direct;
    //                                     var gut = data.gut;
    //                                     var mainActor = data.mainActor;
    //                                     var screenWriter = data.screenWriter;
    //                                     var htmlStr = '<div class = "mask">\
    //                                     <p>导演:'+direct+'<p>\
    //                                         <p>剧情:'+gut+'<p>\
    //                                             <p>主演:'+mainActor.reduce(function(prev,curv){
    //                                                 prev += curv +' ';
    //                                                 return prev;

    //                                             },'')+'<p>\
    //                                                 <p>编剧:'+ screenWriter.reduce(function(prev,curv){
    //                                                 prev += curv +' ';
    //                                                 return prev;

    //                                             },'')+'<p>\
    //                                     </div>'
    //                                    $(htmlStr).appendTo('body').css({position:'absolute',left:$(window).outerWidth()/2,bottom:100,width:400,marginleft:-200});

    //                                 }
    //                             })
    //                         }).children().eq(0).attr('src',ele.poster).next().text(ele.name);
    //                         $Wrapper.append($MovieSection);
    //                     });
    //                 }

    //             });

    //         }else{

    //         }

    //     }


    // });

    //then
   ( function (){
       return $.ajax({
        url: 'https://open.duyiedu.com/jq/movie/power',
        type:'POST',
        data:{
            username:'cst',
            password:'123123',
        }
    });
   })().then(function(res){
       if(res.data.power == 'root'){
           return $.ajax({
            url: 'https://open.duyiedu.com/jq/movie/movieList',
            type:'GET',
           })
       }
   }).then(function(res){
    var data = res.data;
    var $Wrapper = $('.wrapper');
    var df = $.Deferred();
    $.each(data,function(index,ele){
                var $MovieSection = $('.tpl').clone().removeClass('tpl').addClass('movieSection');
                 $MovieSection.data({id:ele.id})
                 .on('click',function(){
                     df.resolve($(this));

                 })
                 .children().eq(0).attr('src',ele.poster).next().text(ele.name);
                            $Wrapper.append($MovieSection);
    });
    return df.promise();
   }).then(function(dom){
    return $.ajax({
                 url:' https://open.duyiedu.com/jq/movie/movieInfo',
                            type:'GET',
                                    data:{
                                        movieId:dom.data('id')
                                    },
    })
   }).then(function(res){
    var data = res.data;
    var direct = data.direct;
     var gut = data.gut;
     var mainActor = data.mainActor;
    var screenWriter = data.screenWriter;
     var htmlStr = '<div class = "mask">\
                    <p>导演:'+direct+'<p>\
                         <p>剧情:'+gut+'<p>\
                     <p>主演:'+mainActor.reduce(function(prev,curv){
                        prev += curv +' ';
                         return prev;

                         },'')+'<p>\
           <p>编剧:'+ screenWriter.reduce(function(prev,curv){
                             prev += curv +' ';
                          return prev;

                                                },'')+'<p>\
                                        </div>'
 $(htmlStr)
 .appendTo('body')
   .css({position:'absolute',left:$(window).outerWidth() / 2,bottom:100,width:400,marginleft:-200});
   });
</script>

</body>
</html>
发布了60 篇原创文章 · 获赞 17 · 访问量 6417

猜你喜欢

转载自blog.csdn.net/qq_42177478/article/details/103769198