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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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 分页原理详解
2009/08/21 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python生成随机红包的实例写法
2019/09/02 Python
Python函数中的可变长参数详解
2019/09/12 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
汽车专业毕业生推荐信
2013/11/12 职场文书
质检的岗位职责
2013/11/17 职场文书
感恩教育活动总结
2014/05/05 职场文书
领导干部作风建设总结
2014/10/23 职场文书
个人借款协议书范本
2014/11/17 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL