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

Posted 2020-11-25 Minstrel223

许多搜索引擎都提供了关键词联想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