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

 
 

百度搜索关键词联想API JSONP使用实例的更多相关文章

  1. js 获取百度搜索关键词的代码

    有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...

  2. python+selenium实现自动化百度搜索关键词

    通过python配合爬虫接口利用selenium实现自动化打开chrome浏览器,进行百度关键词搜索. 1.安装python3,访问官网选择对应的版本安装即可,最新版为3.7. 2.安装seleniu ...

  3. 记录这一刻:百度搜索结果“文件格式:-HTML文本”

    只要百度搜索关键词无论结果是"文件格式:-HTML文本",现在,这个问题已经被修复. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG ...

  4. jsonp跨越请求百度搜索api 实现下拉列表提示

    题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一 ...

  5. 跨域解决方案之JSONP,通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  6. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  7. python requests库网页爬取小实例:百度/360搜索关键词提交

    百度/360搜索关键词提交全代码: #百度/360搜索关键词提交import requestskeyword='Python'try: #百度关键字 # kv={'wd':keyword} #360关 ...

  8. selenium-java web自动化测试工具抓取百度搜索结果实例

    selenium-java web自动化测试工具抓取百度搜索结果实例 这种方式抓百度的搜索关键字结果非常容易抓长尾关键词,根据热门关键词去抓更多内容可以用抓google,百度的这种内容容易给屏蔽,用这 ...

  9. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

随机推荐

  1. vue-learning:25 - component - 概念-定义-注册-使用-命名

    概念 Vue遵循Web Component规范,提供了自己的组件系统.组件是一段独立的代码,代表页面中某个功能块,拥有自己的数据.JS.样式,以及标签.组件的独立性是指形成自己独立的作用域,不会对其它 ...

  2. eslint 错误提示

    “Missing semicolon.” : “缺少分号.”, “Use the function form of \”use strict\”.” : “使用标准化定义function.”, “Un ...

  3. nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录(2)

    上来先来看下当前实现的效果吧. 前言 首先感谢第一篇留言鼓励的同学,最近各种繁杂的事,时间占用较多,但是也总抽空继续改造这个项目,期间遇到了各种Vue渲染的问题,常规的字符串渲染会在Chrome插件中 ...

  4. mac如何查看已连接wifi的密码

    可以通道mac自带的“钥匙串访问”功能查看.选择需要查询的wifi名称,右击选择“将密码拷贝到剪贴板”,输入管理员密码后,密码就拷贝好了. 找个地方粘贴即可看到密码

  5. 正基AP6212固件

    需要正基技术资料联系我   QQ507014762  电话17666215391 #AP6212_NVRAM_V1.0.1_20160606 2.4 GHz, 20 MHz BW modeThe fo ...

  6. 利用Redis实现集群或开发环境下SnowFlake自动配置机器号

    前言: SnowFlake 雪花ID 算法是推特公司推出的著名分布式ID生成算法.利用预先分配好的机器ID,工作区ID,机器时间可以生成全局唯一的随时间趋势递增的Long类型ID.长度在17-19位. ...

  7. linux 更新jdk

    1.上传jdk版本的包 下载JDK地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  8. iptables详细参数讲解

    table 表 --> chain 链 --->rule 规则Commands:Either long or short options are allowed. --append -A ...

  9. c++ 基础知识回顾 继承 继承的本质就是数据的copy

    c++ 基础知识笔记 继承 什么是继承 继承就是子类继承父类的成员属性以及方法 继承的本质就是 数据的复制 是编译器帮我们做了很多操作 class Base { public: Base(){ cou ...

  10. 洛谷$P$2123 皇后游戏 贪心

    正解:贪心 解题报告: 传送门! 心血来潮打算把$luogu$提高历练地及其之前的所有专题都打通关,,,$so$可能会写一些比较水的题目的题解$QAQ$ 这种题,显然就套路地考虑交换相邻两个人的次序的 ...