從豆瓣接口上取數據實現搜索功能（重點！！！！） · javascript

使用vue jQuery-ajax渲染頁面實現搜索功能 ~~~~ <!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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="test"> <input type="text" @keyup.enter="submit">   <p>{{title}}</p> <img v-bind:src="url" alt=""> <p></p> </div> <script> //使用vue動態添加數據 new Vue({ //作用位置 el："" el:"#test", //數據 data:{ title:"三體", url:"https://img1.doubanio.com/view/subject/m/public/s2768378.jpg" }, //方法 methods: { submit(event) { //成功的情況下執行的函數 var self = this; let value = event.target.value;//獲取輸入框中的數據 let url = `https://api.douban.com/v2/movie/search?q=${value}&count=1` console.log(value); $.ajax({ type: "get", url, dataType: "jsonp", success: function (res) { self.handleData(res); }, error: function (xhr) { document.body.innerHTML = xhr.status; } }) }, handleData(res){ console.log(res) let title=res.subjects[0].title; let url=res.subjects[0].images.small; this.title=title; this.url=url; } } }) </script> </body> </html> ~~~~