## JQuery引入 ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> ``` ## html ``` <div class="container"> <div class="title"></div> <div class="img"> <img src="" alt=""> </div> <div class="id"></div> </div> ``` ## JS ``` <script> $(function(){ var url = "https://api.douban.com/v2/movie/search?q=%E4%B8%89%E4%BD%93&count=1"; $.ajax({ method:"get", url, dataType:"jsonp", success(data){ var title = data.subjects[0].title; var img = data.subjects[0].images.small; var id = data.subjects[0].id; console.log(title); console.log(img); console.log(id); $(".title").html(title); $("img").attr("src",img); $(".id").html(id); } }) }) </script> ``` ## CSS ``` body{ font-size:12px; text-align: center; background: #eeee; } .container{ padding: 20px 250px; } .container>div{ margin-bottom: 20px; } .title{ font-size: 16px; font-weight: bold; } ```