echarts读取本地json数据文件分析【Ajax】

最新推荐文章于 2024-05-15 14:53:08 发布

来杯Sherry

最新推荐文章于 2024-05-15 14:53:08 发布

阅读量3.8k

点赞数 2

分类专栏： H5 | CSS3 | JS 专栏

本文链接：https://blog.csdn.net/weixin_44041700/article/details/112000210

版权

H5 | CSS3 | JS 专栏专栏收录该内容

15 篇文章 0 订阅

订阅专栏

小编日常用到的两种ajax的使用方式，在这里总结一下，

前期工作：先加载jquery文件 jquery.min.js

启动http服务器，或者webstorm

<head>
	<script src="./js/jquery.min.js"></script>
</head>

1、两种请求

1.1、读取本地文件

使用场景：使静态页面获取json文件内容（更具体些，比如echars表想获取本地json数据），这里以读取data.json为例

data.json内容如下：

{"data1": [1, 2],"data2": [3, 4],"data3": [4, 5]}

$(function(){
	$.ajax({
		url:"data.json",
		type:"GET",
		dataType:"json",
		success: function(data){
			//data.data1
			//data.data2
			//data.data3
		},
		error: function(e){
			alert("error")
		}
	})
})

1.2、向服务器请求

使用场景：向服务器发送请求获取后台数据,实现部分刷新，路径是路由

$(function(){
	$.ajax({
		url:"/xxx",   
		type:"POST",
		dataType:"json",
		success: function(data){
			//data.data1
			//data.data2
			//data.data3
		}
		error: function(e){
			alert("error)
		}
	})
})

2、提示

（1）本地静态页面使用ajax请求，发送的是http请求，没有启动本地服务会出现跨域问题
（2）如果在浏览器查看，获取到了数据，但是没有加载成功，弹出error，请检查文件中json格式是否正确，数据是否在前端读取正确
（3）后面遇到再补充哈在这里插入图片描述

来杯Sherry

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts读取本地json数据文件分析【Ajax】

小编日常用到的两种ajax的使用方式，在这里总结一下，前期工作：先加载jquery文件 jquery.min.js1、两种请求1.1、读取本地文件使用场景：启动本地服务器、或者webstorm（保证请求在同一个域内），使静态页面获取json文件内容（更具体些，比如echars表想获取本地json数据），这里以读取data.json为例data.json内容如下：{"data1": [1, 2],"data2": [3, 4],"data3": [4, 5]}$(function(){ $.
复制链接

扫一扫