vue-resource 通过jsonp跨域获取,饿了么城市地址失败的问题?
vue-resource可以获取到百度,360搜索关键字的接口,却获取不到饿了么城市地址的接口?
详细问题见下方代码注释
点击错误链接可以看到json数据其实已经获取到了
饿了么城市数据接口查询失败?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resource跨域取数据</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="kw" @keyup="search()" placeholder="请输入关键字">
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
kw:"",
items:""
},
methods:{
search:function(){
//我是完整接口地址: https://www.ele.me/restapi/v2/pois?extras%5B%5D=count&geohash=ws105rz9smwm&keyword=a&limit=20&type=nearby
this.$http.jsonp("https://www.ele.me/restapi/v2/pois",{
keyword:this.kw, //关键字
geohash:"ws105rz9smwm", //城市,
limit:5,
type:"nearby"
},{
jsonp:'callback' //怎么判断jsonp是否改名了,如何找到改名后的callback名呢????
}).then(function(res){
this.items=res.data.s;
console.log(res.data.s);
},function(res){
console.log(res.status);
});
}
}
})
</script>
</body>
</html>
百度关键字接口测试OK
search:function(){
//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=&csor=1&cb=jQuery110209546341864469152_1507385323426&_=1507385323429
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd:this.kw
},{
jsonp:'cb' //jsonp中默认的callback等于"callback"
}).then(function(res){
this.items=res.data.s;
console.log(res.data.s);
},function(res){
console.log(res.status);
});
}
360搜索接口OK
search:function(){
//https://sug.so.360.cn/suggest?callback=jQuery18306664889150769138_1507386648055&encodein=utf-8&encodeout=utf-8&format=json&info=%7B%22q%22%3A%5B%22%25E9%25A6%2599%25E6%25B8%25AF%25E9%25B8%25BD%25E7%25AC%25BC%22%2C%22hanguo%2520%25E9%25B8%25BD%25E7%25AC%25BC%22%5D%2C%22id%22%3A%5B%2201506994852669%22%2C%2201506994838087%22%5D%7D&_=1507386655892
this.$http.jsonp("https://sug.so.360.cn/suggest",{word:this.kw}).then(function(res){
this.items=res.data.s;
console.log(res.data.s);
},function(res){
console.log(res.status);
});
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
dalao,你这个饿了么接口根本不是jsonp,只是ajax而已,所以你要用
this.$http.get
才对用jsonp请求ajax能成功就怪了。。。
注意jsonp和ajax是两个完全不同的东西。。。
改用axios吧,官方推荐的