利用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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JavaScript Prototype对象
Jan 07 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
很棒的vue弹窗组件
May 24 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 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中的登陆login实例代码
2016/06/20 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
路政管理专业推荐信
2013/11/11 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
社会工作专业求职信
2014/07/15 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
运动会开幕式主持词
2015/07/01 职场文书
校运会加油稿大全
2015/07/22 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Elasticsearch 基本查询和组合查询
2022/04/19 Python
MySQL新手入门进阶语句汇总
2022/09/23 MySQL