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

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

以百度为例，

window.baidu = {
    sug: function(json) {
        vm.sugArray=json.s
    }
}
function baiduSug(str){
    if(str){
        let sug=document.createElement(‘script‘)
        sug.src=`http://suggestion.baidu.com/su?wd=${str}&cb=window.baidu.sug`
        document.getElementsByTagName(‘body‘)[0].appendChild(sug)
    }
    else vm.sugArray=[]
}

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

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

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

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

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

window.baidu = {
    sug: function(json) {
         vm.sugArray=json.s
    }
}

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