js ajax实现搜索,js-ajax实例：搜索栏

**搜索栏案例(你值得拥有)**


~~~

Document

{{title}}

{{author}}

new Vue({

el: "#container",

data: {

title: "三体",

url: "https://img1.doubanio.com/view/subject/s/public/s2768378.jpg",

author: "刘慈欣，祖籍河南，长于山西，中国科普作家协会会员，山西省作家协会会员，高级工程师。 自1999年处女作《鲸歌》问世以来，刘慈欣已发表短篇科幻小说三十余篇、出版长篇科幻小说六部，并创下连续八年荣获中国科幻最高奖“银河奖”的纪录。他的长篇作品《三体》开创《科幻世界》月刊连载原创作品的先例，成为2006年度最受关注、最畅销的科幻小说。"

},

methods: {

submit(event){

var self = this;

let value = event.target.value;

let url = `http://douban.uieee.com/v2/book/search?q=${value}&count=1`;

$.ajax({

type: "get",

url,

dataType: "jsonp",

success: function(res) {

self.title = res.books[0].title;

self.url = res.books[0].images.small;

self.author = res.books[0].author_intro;

}

})

}

}

})

~~~