vue-resource的jsonp请求加百度搜索接口实现搜索功能

最新推荐文章于 2022-04-16 15:52:36 发布

huzhenv5

最新推荐文章于 2022-04-16 15:52:36 发布

阅读量467

点赞数

分类专栏： Vue 文章标签： vue-resource jsonp 百度搜索 sugrec

本文链接：https://blog.csdn.net/huzhenv5/article/details/100077285

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先我们要引入vue的依赖文件vue.js，这里就不赘述了

然后我们要引入vue-resource，vue-resource支持npm安装和browre安装

npm安装方式：

npm install vue-resource --save

brower安装方式：

bower install vue-resource

接着我们打开百度的网页，看看百度搜索的自动补全功能调用的哪个接口，通过在搜索框中输入1，我们发现有一个xhr的请求，参数中有我们请求的关键字1，返回的结果为一个回调函数，结果中有自动补全的字符串：

我们再看下该接口的入参：

基本可以确定该接口需要wd和cb这两个参数，wd是搜索的关键字，cb是响应中调用函数的函数名；尝试发现通过这两个参数请求接口报错，所以猜测可能是请求的参数或者请求头缺少，通过尝试发现是入参少了prod参数，我们加上该参数后，接口可正常返回结果，上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>
	<script type="text/javascript" src="bower_components/vue-resource/dist/vue-resource.js"></script>
</head>
<body>

	<input type="text" name="" v-model='wd' v-on:input='changed'>
	<ul>
		<li v-for='i in arr'><a v-bind:href='"https://www.baidu.com/s?wd=" + i.q'>{{i.q}}</a></li>
	</ul>

	<script type="text/javascript">

		
		new Vue({
			el: 'body',
			data: {
				arr: [],
				wd: ''
			},
			methods:{
				changed:function(){
					this.$http.jsonp('https://www.baidu.com/sugrec',{
						wd: this.wd,
						prod: 'pc'
					},{
						jsonp: 'cb'
					}).then(function(data){
						this.arr = data.data.g
					}, function(err){
						console.log(err)
					})
				}
			}
		})

	</script>
	
</body>
</html>