一 , 问题描述
通过 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 中函数名相同;
来源: http://www.jianshu.com/p/938ace632841