http://suggestion.baidu.com/su?cb=getwd&wd=123 这个用jsonp跨域的vue
时间: 2023-12-24 21:06:08 浏览: 38
在 Vue 中,可以使用 `Vue.jsonp` 方法来发送 JSONP 请求,跨域请求百度搜索建议 API 可以按照以下方式实现:
```javascript
Vue.jsonp('http://suggestion.baidu.com/su', {
params: {
wd: '123',
cb: 'getwd'
}
}).then(response => {
console.log(response)
})
```
其中,`params` 参数用于指定请求参数,`cb` 参数指定回调函数的名称。
需要注意的是,由于 JSONP 请求是通过动态创建 `script` 标签实现的,因此在 Vue 中使用 `Vue.jsonp` 发送 JSONP 请求时,需要在页面中放置一个空的 `script` 标签,用于接收服务器返回的数据。可以按照以下方式在 Vue 组件中实现:
```html
<template>
<div></div>
</template>
<script>
export default {
mounted () {
const script = document.createElement('script')
script.src = 'http://suggestion.baidu.com/su?cb=getwd&wd=123'
document.body.appendChild(script)
}
}
</script>
```
在上面的代码中,通过动态创建 `script` 标签,并将其添加到页面中,实现了跨域请求。服务器返回的数据会自动执行 `getwd` 回调函数,并在页面中输出搜索建议的结果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![jar](https://img-home.csdnimg.cn/images/20210720083455.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)