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

时间:2021-11-15 00:55:48


场景

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

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

 Jsonp(JSON with Padding)

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

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

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

注:

博客:​​BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_-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数据格式。

Jquery中使用JsonP加载本地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文件,不然会提示回调方法未定义

Jquery中使用JsonP加载本地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文件解决跨域问题