利用jsonp解决js读取本地json跨域的问题


Posted in Javascript onDecember 11, 2018

前言

本文主要给大家介绍了关于使用jsonp解决js读取本地json跨域的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

一 、问题描述

通过ajax方式读取本地json文件,谷歌浏览器会提示跨域错误,导致获取不到json数据。

跨域报错.png

ajax获取json数据代码:

$.ajax({
   url: "file/employeejson.json",//json文件位置
   type: "GET",//请求方式为get
   dataType: "json", //返回数据格式为json
   success: function(data) {//请求成功完成后要执行的方法 
   console.log(data); 
   }
  })

这段代码本身没有错误,只是谷歌浏览器因为安全问题,拦截这类的访问。但是在火狐浏览器中可以访问,可以去尝试一下。

二、解决跨域问题

使用jsonp解决跨域 :(仅适用于GET请求)

实现原理:

<script> 标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。

所以 JSONP 的理念就是,我和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。非常巧合的一点(其实并不是),JSON 的数据格式和 JavaScript 语言里对象的格式正好相同。所以在我们约定的函数里面可以直接使用这个对象。

直接上代码:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title>JSON文件的调用</title> 
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>  
 </head> 
 <body> 
 </body> 
 <script>
    //回调函数
  function train (data){ 
     console.log(data);
  } 
</script>

<!--jsonp中 需要注意的是 
 <script src="file/employeejson.json?cb=train"></script> 
 src ? 之前为文件地址,? 之后为回调函数callback名称, 
回调函数可以简写为 cb , 然后 回调函数 名称要与JSON文件中的名称一致 
可以在 对应的文件名中看下,如,employeejson.json?callback=train,employeejson.json的 函数名为 train--> 
<script src="file/employeejson.json?cb=train"></script>
</html> 
 //JSON文件 
train(
 [
 {
  "name":"xx",
  "id":"ww"
  }
 ]
 )

三、注意

  • 一定要在json文件的外部用函数名+()套住;
  • js中的回调函数一定要与json中函数名相同;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
Javascript入门学习资料收集整理篇
Jul 06 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue3.0 上手体验
Sep 21 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 #Javascript
JS中使用new Option()实现时间联动效果
Dec 10 #Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 #Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 #Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 #Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
You might like
php生成随机颜色的方法
2014/11/13 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python 实现微信防撤回功能
2019/04/29 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
采购主管岗位职责
2014/02/01 职场文书
工作保证书范文
2014/04/29 职场文书
小学教师年度个人总结
2015/02/05 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android