ajax同步异步请求与JSON数据解析

本文记录了在使用Ajax从JSON文件读取数据并填充Echarts环形图时遇到的问题。主要讨论了Ajax的同步和异步请求的区别,强调在需要等待Ajax返回值后再执行后续操作的情景下,应使用同步请求。同时提到了解析JSON数据的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天接到一个任务,将json文件中的数据读取出来,填到echars的环形图中。。。。

中间遇到了很多问题,整理一下


json文件:

{
	"circle": [
		{
			"name": "名称1",
			"value": 15
		}, {
			"name": "名称2",
			"value": 25
		}, {
			"name": "名称3",
			"value": 35
		}
	],
	"table": [
		 {
			"metting": [
				{
					"name": "会议室1",
					"number": 3
				}, {
					"name": "会议室2",
					"number": 1
				}
			]
		}, {
			"court": [
				{
					"name": "会议室3",
					"number": 7
				}, {
					"name": "会议室4",
					"number": 14
				}
			]
		}
	]
}

使用ajax从json文件中读取数据

	var strarr; 
	$.ajax({
		type: "get",
		url: "bottom.json",
		dataType: "json",
		async: true,
		success: function(str) {
			strarr = str.circle;
			var result = str.table;
			console.log(strarr);
		}
	});
//下面是将strarr数据插入到echars的环形图中

开始时使用异步方式请求数据,使用chrome浏览器可以看到控制台打印出的数组,而当使用ie浏览器时,便无法打印出数据,因为strarr变量并没有被赋值成功


这里就要说一下ajax请求的同步和异步问题。async:true,默认为true,即进行异步请求,其作用是当ajax向后台发送请求后,会在sucess处等待后台的返回值,此时其之后的代码仍然会继续执行,此时就会出现多线程执行的情况,使用异步可以加快执行的效率。


而现在的情况是,需要将ajax的返回值赋值给strarr,然后将其插入到echarts的环形图中。如果进行异步请求,ajax方法还没有将得到的值赋值给strarr的情况下就已经将其插入到环形图中了,这样显然是不对的。这时就需要用到同步请求,等待执行的ajax请求方法得到返回值之后才执行之后的代码。


解析json数据:

获取table下的number对应的数据有两种方式:

 result = str.table;
 result[0].metting[0].number;
或者:
result[0].metting[2]["number"]

附:echarts中的环形图中需要的数据格式是 name:name,value:value  (str.circle)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值