利用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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
用JS实现一个页面多个css样式实现
May 29 Javascript
jquery自定义属性(类型/属性值)
May 21 Javascript
javascript date格式化示例
Sep 25 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
Angular路由简单学习
Dec 26 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
js实现表格单列按字母排序
Aug 12 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
dedecms模版制作使用方法
2007/04/03 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
化工机械应届生求职信
2013/11/04 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
高中生活自我鉴定
2014/01/18 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
白酒市场营销方案
2014/02/25 职场文书
铲车司机岗位职责
2014/03/15 职场文书
学校运动会霸气口号
2014/06/07 职场文书
爱国影片观后感
2015/06/18 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL