requireJs调用jsonp方法(解决Echarts中调用本地json数据跨域问题)

最新推荐文章于 2023-05-11 19:08:54 发布

PlayerCrane

最新推荐文章于 2023-05-11 19:08:54 发布

阅读量1.5k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/guolinghang/article/details/90229822

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、json跨域问题

1.以本地调用json为例，写一个json数据

//data.json
{
    "name":["Android","IOS","PC","Other"],
    "data":[420,200,360,100]
}

2.调用它：

<!-- index.html -->
<!DOCTYPE html>  
<head>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" data-main='js/main.js'></script>
</head>
<body>
    <script>
        $.getJSON('data.json', function(data){
            console.log(data);
        });
    </script>
</body>

3.提示跨域错误：

4.分析

浏览器存在同源策略，不允许ajax请求一个目标地址为非本域（协议，域名，端口任意一个不同）的web资源。

不搭建服务器的情况下，本地调用文件使用的是file协议，浏览器（chrome）不支持。

二、引入jsonp解决方式

除了搭建服务器，利用http协议调用json数据之外，还可以用jsonp这一简便方法，原理在于web调用js文件不受跨域限制的影响，且json描述数据的方法也受原生JS的支持。

即你可以把数据写成JS格式，客户端再以调用JS的方法调用这部分数据，可以完美避开跨域问题。

1.改变数据写法，从data.json到data.js(实际上，文件格式不改在web也能生效，但是有些编译器会提示语法错误，且不规范），如果data.json是在描述一段数据，那data.js即为如何使用一段数据:

//data.js
//如果callData在使用之前未定义，则会报错

callData({
    "name":["Android","IOS","PC","Other"],
    "data":[420,200,360,100]
})

2.载入js，运行它:

<!-- index.html -->
<!DOCTYPE html>  
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>

        //定义一个函数，处理数据，相当于ajax的回调函数
        var callData=function(data){
            console.log(data);
        }
    </script>
    <!-- 载入数据，也可视为调用函数callData -->
     <script type="text/javascript" src="data.js"></script>
</body>

3.调用成功

调用成功

三、利用requireJs调用jsonp数据（以Echart示例）

1.requireJs的说明不再赘述，主页如下（JS的调用全部写在配置文件上，即Main.js，主页只调用requirejs即可)：

<!-- index.html -->
<!DOCTYPE html>  
<head>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main='main.js'></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        
    </body>

2.requireJs配置文件如下：

//main.js
require.config({
    paths: {
        'echarts':['echarts'],//同目录下的echarts.js，该文件请于官网自行下载
        'model':['model']//图表模板配置model.js
    }
})

require([
    'jquery',
    'echarts',
    'model'
],function(){
})

3.图表文件如下（利用echart对图表建模，该配置作为单独的文件分离）：

//model.js
//echart图表模板文件

define(['echarts','data'],function(echarts,data){//依赖echart
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title:{
            text:'ECharts 数据统计'
        },
        xAxis:{
            data:data.name//数据
        },
        yAxis:{},
        series:[
        {
            type:'bar',
            data:data.data//数据
        },
        ]
    };
    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
})

4.数据如下，requirejs中要求调用的js符合AMD规范,但看起来比通常的jsonp写法简便多了。

//data.js

define({
    "name":["Android","IOS","PC","Other"],
    "data":[420,200,360,100]
})

5.实现效果如下：
数据展示

参考文章：

谷歌通过ajax获取本地JSON文件，为什么会提示跨域？
https://www.cnblogs.com/jianxian/p/9069340.html
Echarts 动态数据绑定：
https://www.cnblogs.com/leoxuan/p/6513591.html
[转]JSONP原理详解：
https://blog.csdn.net/hansexploration/article/details/80314948

PlayerCrane

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
requireJs调用jsonp方法(解决Echarts中调用本地json数据跨域问题)

使用requireJs调用jsonp的方法(解决json数据跨域问题)一、json跨域问题以本地调用json为例，写一个json数据//data.json"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]二、引入jsonp解决方式三、利用requireJs调用jsonp数据...
复制链接

扫一扫