场景

jquery中直接请求本地json文件时会提示跨域问题。

Jsonp(JSON with Padding)

是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、本地新建一个json文件，叫user.json

    {"name":"公众号","sex":"男","email":"badao@123.com"},{"name":"霸道的程序猿","sex":"男","email":"badao@123.com"},{"name":"欢迎关注","sex":"女","email":"badao@123.com"}

上面是原json数据格式。

2、使用JsonP需要在json数据中使用"回调方法()"将json数据包括起来。

其中回调方法名是自定义的，只需要保持一致就行。比如这里就叫train

train([{"name":"公众号","sex":"男","email":"badao@123.com"},{"name":"霸道的程序猿","sex":"男","email":"badao@123.com"},{"name":"欢迎关注","sex":"女","email":"badao@123.com"}
] )

3、然后引入jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

4、在script中声明回调函数

    <script type="text/javascript">//回调函数function train(data){console.log(data);}</script>

注意这里的回调函数名字与上面包括的一致。

然后data中就可以获取到json数据。

5、使用如下格式引入json数据

<script src="data/user.json?cb=train"></script>

这里的cb代表callback回调，后面跟的是上面一致的回调方法名。

前面是json文件的路径。

6、注意这里要先将回调方法声明，再引入json文件，不然会提示回调方法未定义

7、完整示例代码


<!doctype html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery 加载 本地Json数据</title>
</head><body><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">//回调函数function train(data){console.log(data);}</script><script src="data/user.json?cb=train"></script>
</body></html>

8、效果

Jquery中使用JsonP加载本地json文件解决跨域问题相关推荐

加载本地json文件,并利用批处理调用Chrome显示html
加载本地json文件 1.加载本地json文件为了调试保存在本地的json数据,需要进行读入.一般使用jQuery来进行,但需要对浏览器进行一点设置. Chrome浏览器中有一个启动选项--allo ...
js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
今天农村老家的天气不是很好而且外面还下雨了,每天只能坐在老家打开电脑,看看文章,写写文章今天我给大家带来一篇Flutter加载本地JSON文件教程本头条核心宗旨欢迎来到「技术刚刚好」作者,「 ...
easyui使用ajax获取json文件,easyui 加载本地json 文件的方法
1.1使用内置的Camara应用程序捕捉图像一: Camara应用程序包含的意图过滤器发布时去掉 debug 和提醒日志,简单无侵入在 proguard 文件中加入下面代码,让发布时去掉 de ...
google支持本地ajax,360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
Android中使用WebChromeClient显示Openlayers加载本地GeoJson文件显示地图(跨域问题解决)
场景 Openlayers中加载GeoJson文件显示地图: Openlayers中加载GeoJson文件显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客上面加载显示GeoJso ...
使用Sencha Touch加载本地Json数据
本例没有采用Sencha的mvc模式.只是一个简单的读取加载本地Json数据示例. 文档结构如下: app.js代码如下: Ext.require(['Ext.form.Panel','Ext.dat ...
android 浏览器打开本地html文件,如何在Android浏览器中加载本地HTML文件
我试图在设备浏览器中加载本地html文件.我尝试过使用WebView,但它不适用于所有设备.如何在Android浏览器中加载本地HTML文件 //WebView method that didnt w ...
cefsharp读取exe html,wpf中使用cefsharp加载本地html网页并实现cs和js的交互并且cefsh...
wpf中使用cefsharp加载本地html网页并实现cs和js的交互并且cefsh wpf中使用cefsharp加载本地html网页并实现cs和js的交互,并且cefsharp支持any cpu 第 ...
uiwebview 读取本地html,UIWebView加载本地HTML文件
一.准备HTML文件及其资源文件使用UIWebView加载本地的HTML文件 index.html,在index.html中引用了本地的图片.CSS文件.JS文件以及外部的图片. index.htm ...

Jquery中使用JsonP加载本地json文件解决跨域问题

场景

Jsonp(JSON with Padding)

实现

Jquery中使用JsonP加载本地json文件解决跨域问题相关推荐

最新文章

热门文章