🐾 （一）javascript中的 var 和 $
var：var 是一个关键字，用于声明变量。
$： $ 是jQuery函数的别名，通常用于选择DOM元素、创建jQuery对象等。
🐾 （二）javascript中的 fetch API 和 $.ajax API
（1）Fetch API： 是一个现代Web API，用于执行网络请求。 基于Promise设计，使得处理异步操作更加直观和易于管理。 提供了.then()和.catch()方法来处理Promise的解析和拒绝。
（2）jQuery $.ajax： 是jQuery库中的一个方法，用于发送异步HTTP请求。 提供了丰富的配置选项和回调函数，用于处理请求和响应。 支持多种类型的请求（GET、POST等）和数据格式（JSON、XML等）。
- Fetch API 使用方法
- 初始化请求
fetch('/system/score_first/score_first')
这行代码使用fetch函数发起一个GET请求到指定的URL（/system/score_first/score_first）。fetch返回一个Promise对象，该对象在请求完成后会被解析或拒绝。
- 处理响应
.then(response => response.json())
请求成功后，response对象包含了服务器的响应。这里使用.json()方法将响应体解析为JSON格式，并返回一个新的Promise，该Promise在解析完成后会返回解析后的JSON数据。
- 更新ECharts图表
.then(data => {option1.xAxis[0].data = data.xData;option1.series[0].data = data.yData;myChart1.setOption(option1);
})
解析后的JSON数据（data）被用来更新ECharts的配置项（option1）。这里假设option1是一个已经定义好的ECharts配置项对象，它包含了图表的各种配置（如标题、坐标轴、系列等）。然后，使用myChart1.setOption(option1)方法应用这些更新。
- 错误处理
.catch(error => {console.error('Error fetching data:', error);
});
如果在请求过程中发生错误（如网络问题、服务器错误等），则执行.catch方法中的回调函数，并将错误信息打印到控制台。
- jQuery $.ajax 使用方法
- 初始化请求
$.ajax({url: '/system/score_first/score_first',type: 'GET',dataType: 'json',// ...
});
这里使用$.ajax方法配置了一个AJAX请求。url指定了请求的URL，type指定了请求类型（GET），dataType指定了预期的服务器响应的数据类型（JSON）。
- 成功回调
success: function(data) {option1.xAxis[0].data = data.xData;option1.series[0].data = data.yData;myChart1.setOption(option1);
}
当请求成功时，success回调函数被调用，并传入解析后的响应数据（data）。
- 错误回调
error: function(xhr, status, error) {console.error('Error fetching data:', error);
}
如果请求失败，error回调函数被调用。
🐾 （三）$.ajax获取后端数据加载文档对象模型
$(document).ready(function() { ... }); 这段代码的作用是确保DOM（文档对象模型）完全加载和解析完成后再执行包含在其中的$.ajax等代码。
// 1 fetch方法
var myChart1 = echarts.init(document.getElementById('echarts-records'), 'walden')
function mychart1(time){if(time=='year1'){fetch('/system/score_first/score_first') .then(response => response.json()) .then(data => { option1.xAxis[0].data = data.xData; option1.series[0].data = data.yData; myChart1.setOption(option1); }) .catch(error => { console.error('Error fetching data:', error); })});
});// 2 $.ajax方法
var myChart1 = echarts.init(document.getElementById('echarts-records'), 'walden')
function mychart1(time){if(time=='year1'){$.ajax({ url: '/system/score_first/score_first', type: 'GET', dataType: 'json', success: function(data) {option1.xAxis[0].data = data.xData; option1.series[0].data = data.yData; myChart1.setOption(option1); }error: function(xhr, status, error) {console.error('Error fetching data:', error);}});
});// 3 $.ajax获取后端数据加载文档对象模型
$(document).ready(function() {$.ajax({url: 'some-url',method: 'GET',success: function(data) {}});
});