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

素颜马尾好姑娘i 2023-10-01 18:06 17阅读 0赞

## 场景 ##

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

### Jsonp(JSON with Padding) ###

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

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

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

注：

博客：  
[BADAO\_LIUMANG\_QIZHI的博客\_霸道流氓气质\_CSDN博客-C\#,SpringBoot,架构之路领域博主][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数据格式。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

4、在script中声明回调函数

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

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

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

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

前面是json文件的路径。

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

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、效果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c86c98969f3b405fb3015ef3f8916d8e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[BADAO_LIUMANG_QIZHI_CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/12793db4ca4741e181207ff7fa134bd9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/3abb884e53b5494b9b0a4f4d819cb672.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/b771b237be674e3b94dbc89d520cd3d2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16