jquery学习笔记——getJSON无法读取本地json数据的问题

今天在改网页的时候，需要调取本地json文件进行测试

一开始用的是<script type='text/javascript' src='test.json'></script>

在调用的时候没有任何问题。

当然，这种做法说白了就是把所有的json文件中的数据都加载到内存中

但在数据量庞大的情况下，这种方法显然是不可取的

所以想到了用jquery的getjson异步加载

    <script>$(function(){$.getJSON("test.json", function(data){alert('abc');});});</script>

然而，在调用本地测试文件时，却始终无法成功

一开始以为是json文件格式或者编码的问题，检查了n次之后都没找出问题的原因

（最麻烦的是百度搜索相关问题也没有丝毫头绪）

后来在浏览器控制台中找到了问题的原因

（以搜狗浏览器为例：F12-Console）

XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/test.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, se-extension, https.

跨域请求仅支持在http/data/chrome/se-extension/https协议下使用

什么叫跨域？
字面理解，跨是跨越，域是别的服务器，跨域就是到别的服务器上取东西。
报错的意思应该就是chrome下，跨域请求只能通过通过这些协议标准实现：http、data、https、chrom-extension、chrom-extension-resource。
只要协议、域名、或端口有任何一个不同，就会被当做是不同的域。

但是仔细再一想，我请求的是本地文件啊，没有通过服务器请求啊，应该不算跨域么？什么鬼再查发现，chrome在读取本地相对路径脚本时，禁止向第三方请求数据。 （只要是通过file://方式访问，或者直接拖进浏览器访问，都叫本地运行）

什么叫第三方？那就是不管本地文件、还是服务器url 文件都不行。

提示这个原因是：浏览器为了安全性考虑，默认对跨域访问禁止。

知道了原因，接下来是解决方式：

解决一：
在sublime里面 启动sublimeServer，开启服务器模式，在浏览器中通过localhost:8080/index.html访问，再看 debug tool，没有报错了，完美！~成功访问到本地json文件。好奇助我成长，顺手拖进火狐测了一下，并没有报错
FireFox : 允许读取本地相对路径脚本。

这是万能的（就是麻烦……）

解决二：
查资料，发现还有一种解决方法，不用启动服务器模式，直接更改chrome的设置就行。
在chrome属性设置中，添加启动参数：
--allow-file-access-from-files : 允许本地Ajax请求，也叫file协议下的Ajax请求
--enable-file-cookies : 允许chrome保存本地设置cookie设置方法：chrome快捷方式–右键“属性”–快捷方式–目标

即右键chrome的快捷方式（只有快捷方式才能额外添加命令）属性-快捷方式-目标

将目标改为C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --enable-file-cookies。

使用时打开chrome浏览器，再把html文件丢进去就可以生效了。（直接打开html文件依然无效）

ps：如果不改快捷方式，则在cmd命令中执行时加上后面这一段（或者建个bat文件来搞也是可以的）

pps：经测试，方法二对搜狗浏览器和世界之窗浏览器无效（估计也没人用这玩意儿开发……）

引用资料：https://blog.csdn.net/u012786716/article/details/56481768

jquery学习笔记——getJSON无法读取本地json数据的问题相关推荐

ASP.NET MVC and jqGrid 学习笔记 2-如何从本地获得数据
上回说到jqgrid的基本配置,同时演示了显示数据的一种方法--datatype: "local".这种方法是从本地获取的,确切地说是在前端页面的javascript里写的硬编码. ...
GAMS学习笔记02——GAMS读取Excel的数据
初学GAMS,记录一下GAMS从Excel中读取数据的过程,有很多细节需要尝试才能发现问题,希望以通俗的文字记录一下我遇到的问题. 基本概念 GAMS从Excel中提取数据的基本逻辑是通过Gdxxrw ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
Jquery中使用JsonP加载本地json文件解决跨域问题
场景 jquery中直接请求本地json文件时会提示跨域问题. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...

jquery学习笔记——getJSON无法读取本地json数据的问题

jquery学习笔记——getJSON无法读取本地json数据的问题相关推荐

最新文章

热门文章