一. 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. JavaScript之原型、函数、实例

    JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() {    // 执行代码 } 当调用该函数时,会执 ...

  2. Python人工智能第二篇:人脸检测和图像识别

    Python人工智能第二篇:人脸检测和图像识别 人脸检测 详细内容请看技术文档:https://ai.baidu.com/docs#/Face-Python-SDK/top from aip impo ...

  3. 记录axios在IOS上不能发送的问题

    最近 遇到 了axios在IOS上无法发送的问题,测试 了两个 苹果 机,IOS10上不能发送,IOS12可以,百度了下,找到了解决方法.记录下吧 首先引入qs,这个安装axios也已经有了吧:然后在 ...

  4. iOS多线程GCD简介(一)

    之前讲过多线程之NSOperation,今天来讲讲代码更加简洁和高效的GCD.下面说的内容都是基于iOS6以后和ARC下. Grand Central Dispatch (GCD)简介 Grand C ...

  5. 如何创建SAP Cloud Platform Process Integration runtime服务

    登录SAP Cloud Platform cockpit,进入subaccount的Service marketplace界面,选择process integration runtime: 点击ins ...

  6. idea安装与注册码破解

    idea安装与注册码破解 https://www.cnblogs.com/jajian/p/7989032.html

  7. httpclient工具类,post请求发送json字符串参数,中文乱码处理

    在使用httpclient发送post请求的时候,接收端中文乱码问题解决. 正文: 我们都知道,一般情况下使用post请求是不会出现中文乱码的.可是在使用httpclient发送post请求报文含中文 ...

  8. iManager微服务自定义上传数据的两种方法

    背景 当数据量大时,通过浏览器上传可能速度较慢,可以使用以下两种方式进行数据导入. 方法一 1.访问k8s主页(31234端口) 找到所创建的微服务的命名空间(例如icloud-native-xxx) ...

  9. pstree - 树状显示进程信息

    pstree - display a tree of processes(树状结构显示进程关系) 格式: pstree [option] option: -a --arguments:显示每个程序的完 ...

  10. Cloudera Manager 5.15.1忘记密码怎么破?

    Cloudera Manager 5.15.1忘记密码怎么破? 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.登陆CM修改默认密码 1>.使用默认密码登陆CM界面 2&g ...