jsonp跨域获取百度联想词的方法分析


Posted in Javascript onMay 13, 2019

本文实例讲述了jsonp跨域获取百度联想词的方法。分享给大家供大家参考,具体如下:

jsonp原理:

1.Web页面上用<script> 引入 js文件时则不受是否跨域的影响 (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)

2.于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据)

3.因为我们无法监控通过<script>的src属性是否把数据获取完成,所以我们需要做一个处理。

4.实现定义好处理跨域获取数据的函数,如 function doJson(data){}。

5.用src获取数据的时候添加一个参数cb=‘doJson' (服务端会根据参数cb的值返回对应的内容) 此内容为以cb对应的值,doJson为函数真实要传递的数据为函数的参数的一串字符如 doJson('数据')

百度联想词的实现:

用jsonp解决跨域问题。我们就跨域拿到百度的数据

<script>
  //输入框
  var oInp = document.getElementsByTagName('input')[0];
  //得到的数据存在ul的li里
  var oUl = document.getElementsByTagName('ul')[0];
  //获取输入内容,查找百度对应的src
  oInp.oninput = function () {
    var value = this.value;
    var oScript = document.createElement('script');
    oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=doJosn';
    document.body.appendChild(oScript);
  }
  //对传回的数据进行处理(回调函数)
  function doJosn(data) {
    var s = data.s;
    var str = '';
    if (s.length > 0) {
      s.forEach(function (ele, index) {
        str += '<li><a href =https://sp0.baidu.com/s?wd=' + ele + '>' + ele + '</a></li>';
      })
      oUl.innerHTML = str;
      oUl.style.display = 'block';
    } else {
      oUl.style.display = 'none';
    }
  }
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 获取select下拉列表值的代码
Sep 07 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
基于Fixed定位的框选功能的实现代码
May 13 #Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
使用原生js编写一个简单的框选功能方法
May 13 #Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 #Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 #Javascript
JavaScript封闭函数及常用内置对象示例
May 13 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php session的锁和并发
2016/01/22 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
Vue实现验证码功能
2019/12/03 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
公益广告语集锦
2014/03/13 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
广播体操比赛口号
2014/06/10 职场文书
水电维修专业推荐信
2014/09/06 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
孙振耀退休感言
2015/08/01 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
left join、inner join、right join的区别
2021/04/05 MySQL
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python