一. HTML代码如下：

参考网站（echarts-JSON请求数据）：https://blog.csdn.net/you23hai45/article/details/51585506

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>echarts-JSON请求数据</title>

        <script type="text/javascript" src="./jquery.min.js" ></script>     //js文件和data.json都在同一文件夹

        <script type="text/javascript" src="./echarts.min.js"></script>

        <script>

            $(document).ready(function(){

                var chart = document.getElementById('chart');

                var chartData = echarts.init(chart);

                chartData.setOption({

                    title: {

                        text: '异步数据加载示例'

                    },

                    tooltip: {},

                    legend: {

                        data:['销量']

                    },

                    xAxis: {

                        data: []

                    },

                    yAxis: {},

                    series: [{

                        name: '销量',

                        type: 'bar',

                        data: []

                    }]

                });

                $.get('./data.json').done(function (data) {

                    console.dir("data:"+data);  //看看json的数据

                    console.dir("data.name:"+data.name); // object

                    console.dir("data.data:"+data.data); // object

                    console.dir(typeof(data)); //控制台输出的格式

                    // 填入数据

                    // var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式

                    chartData.setOption({

                        xAxis: {

                            data: data.categories

                        },

                        series: [{

                            name: '销量',

                            data: data.data

                        }]

                    });

                });

                function eConsole(param)

                {

                    console.dir(param);

                }

                chartData.on("click",eConsole);

            });

        </script>

    </head>

    <body>

        <div id="chart" style="width: 900px; height: 600px;"></div>

    </body>

</html>

二. data.json文件如下：

{

    "name": [

        "苹果",

        "橘子",

        "荔枝",

        "桃子",

        "栗子",

        "梨子",

        "柿子"

    ],

    "data": [

        500,

        280,

        386,

        190,

        107,

        207,

        452

    ]

}

三. 以上面的方式访问会报错。如下：

报错内容：jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/14620/Desktop/Echarts/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

四. 解决方法：

参考网站（【调试错误】Access to XMLHttpRequest at file:E590/ceshi.json from origin null）：https://blog.csdn.net/OrangeChenZ/article/details/84986648

谷歌不允许这样访问。
本地部署网站web。
解决方式一：将html页面部署到服务器再访问。

如何部署？

第一步：控制面板->程序与功能->启用或关闭windows功能

Internet Information Services 前面的复选框勾上。

第二步：我的电脑右键->管理->添加网站

注：主机名不填，用localhost:1213访问本地服务器。

报错1：

HTTP 错误 403.14 - Forbidden

Web 服务器被配置为不列出此目录的内容。

解决1：

启用目录浏览。

报错2：

HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。

解决2：

网站1213右键->编辑权限->安全->添加Everyone权限

报错3：

HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页

解决3：

打开IIS管理器，操作如下：

1.功能视图--身份验证--匿名身份验证--编辑--选择应用程序池标识，启用匿名身份验证；
2.功能视图--授权规则--右键添加允许规则--选择所有匿名用户；
3.保证虚拟目录访问权限，可以添加everyone用户授予所有权限！

至此：localhost:1213成功访问。

打开HTML文件：

（over）

关于html异步加载外部json文件报错问题的更多相关文章

  1. JBoss 系列十四：JBoss7/WildFly如何加载外部的文件或properties文件

    http://www.tuicool.com/articles/M7ZR3y 原文 http://blog.csdn.net/kylinsoong/article/details/12623997 主 ...

  2. Vue 加载外部js文件

    Vue.js  加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/M ...

  3. Android 插件化开发（二）：加载外部Dex文件

    在学习Java反射的技术后,我们可以开始更深一步的探究插件化开发了.首先先讲一下Android App的打包流程,然后我们通过一个简单的例子 —— 实现插件化加载外部Dex来完成初级的插件化开发的探索 ...

  4. easyui 加载本地json 文件的方法

    easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...

  5. Spark动态加载外部资源文件

    Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件 之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...

  6. WPF加载Winform窗体时 报错：子控件不能为顶级窗体

    一.wpf项目中引用WindowsFormsIntegration和System.Windows.Forms 二.Form1.Designer.cs 的 partial class Form1 设置为 ...

  7. 导入json文件报错，TypeError expected string or buffer

    导入json文件报错,TypeError expected string or buffer 原因:用字符串赋值后,python会把双引号转换为单引号 import json data = [{&qu ...

  8. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  9. 如何调试异步加载的js文件（浏览器调试动态加载js）

    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...

随机推荐

  1. dump net core lldb 分析

    原文https://www.cnblogs.com/calvinK/p/9274239.html centos7 lldb 调试netcore应用的内存泄漏和死循环示例(dump文件调试) 写个dem ...

  2. PE系统——安装教程

    本教程使用到的软件我会在本文末给出,若失效了请私信我,重新上传. 1.安装PE系统前,把U盘插在电脑上(如果你需要安装Windows10系统,请插入一个容量至少8G的U盘).当然容量最好是32—64G ...

  3. 学习笔记之编程珠玑 Programming Pearls

    Programming Pearls (2nd Edition): Jon Bentley: 0785342657883: Amazon.com: Books https://www.amazon.c ...

  4. js正则表达式【续】(相关字符的解释含义)

    1.字符类[直接量] . (点号,小数点) 匹配任意单个字符,但是行结束符除外\d 匹配一个0-9之间的阿拉伯数字.等价于[0-9]\D    匹配任意一个不是0-9之间阿拉伯数字的字符.等价于[^0 ...

  5. vue设置多个入口

    做VUE项目时,有时想做多个入口来解决某些问题. 在根目录下的复制一份index.html,名称随便你命名,当然,你也可以都是放到一个文件夹下,我的就叫index1.html 然后在App.vue也复 ...

  6. 如何使用Prometheus采集SAP ABAP Netweaver的应用日志数据

    Prometheus是一套开源的系统监控报警框架.它启发于Google的borgmon 监控系统,由工作在 SoundCloud 的 google 前员工在 2012 年创建,作为社区开源项目进行开发 ...

  7. php中call_user_func()与call_user_func_array()区别

    call_user_func:把一个参数作为回调函数调用 用法说明: call_user_func ( callable $callback [, mixed $parameter [, mixed ...

  8. css浮动float详解

    https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

  9. MySQL Replication--中继日志更新

    RELAY LOG相关参数 设置如何保存从节点接收到的主库BINLOG sync_relay_log : 设置如何同步中继日志到中继日志文件. 当sync_relay_log = 0时,则MySQL服 ...

  10. Spring中获取被代理的对象

    目录 Spring中获取被代理的对象 获取Spring被代理对象什么时候可能会用到? Spring中获取被代理的对象 Spring中获取被代理的对象 ### 获取Spring被代理对象的JAVA工具类 ...