码迷,mamicode.com
首页 > Windows程序 > 详细

百度搜索关键词联想API JSONP使用实例

时间:2020-01-29 18:23:21      阅读:465      评论:0      收藏:0      [点我收藏+]

标签:http   不用   pen   json格式   height   网站   动态添加   联想   取数据   

许多搜索引擎都提供了关键词联想api,且大多数都是jsonp. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。使用jsonp就不用担心浏览器因同源策略而禁止跨域这种情况的发生了。

以百度为例,

 1 window.baidu = {
 2     sug: function(json) {
 3         vm.sugArray=json.s
 4     }
 5 }
 6 function baiduSug(str){
 7     if(str){
 8         let sug=document.createElement(‘script‘)
 9         sug.src=`http://suggestion.baidu.com/su?wd=${str}&cb=window.baidu.sug`
10         document.getElementsByTagName(‘body‘)[0].appendChild(sug)
11     }
12     else vm.sugArray=[]
13 }

百度的api实现方式为动态添加

<script src="http://suggestion.baidu.com/su?wd=冠状病毒&cb=window.baidu.sug">

返回的内容为一个回调函数

window.baidu.sug({q:"冠状病毒",p:false,s:["冠状病毒感染性肺炎","冠状病毒的症状","冠状病毒肺炎","冠状病毒是什么","冠状病毒在空气中可以存活多久","干咳是不是新型冠状病毒","冠状病毒性肺炎","冠状病毒肺炎最新情况","冠状病毒感染","冠状病毒肺炎的起因是什么"]});

回调函数的参数是一个json格式的数据,其中s数组即为联想词数组,我们只需要将回调函数定义出来即可实现想要的效果,例如

1 window.baidu = {
2     sug: function(json) {
3          vm.sugArray=json.s
4     }
5 }

每当动态添加上述<script>便可将联想结果赋给vm.sugArray

 

百度搜索关键词联想API JSONP使用实例

标签:http   不用   pen   json格式   height   网站   动态添加   联想   取数据   

原文地址:https://www.cnblogs.com/Minstrel223/p/12240737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!