[TOC] # 跨域搜索 > 輸入搜索內容，返回相應的數據 > 要求數據分離 將請求和獲取數據分離，用函數調用，獲取數據 ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script> ``` ``` <div id="test"> <input type="text" @keyup.enter="submit"> <p>{{title}}</p> <img v-bind:src="url" alt=""> </div> <script> new Vue({ el:"#test", data:{ title:"三體", url:"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2248627938.webp" }, methods:{ submit(event){ var self = this let value = event.target.value; let url = `https://douban.uieee.com/v2/movie/search?q=${value}&count=1` $.ajax({ url, type:"get", dataType:"jsonp", success(res){ self.handleData(res); } }) }, handleData(res){ let title = res.subjects[0].title; let url = res.subjects[0].images.small; this.title = title; this.url = url; } } }) </script> ```