javascript中的 fetch API和 $.ajax API
🐾 （一）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) {
}
});
});
原文地址：https://blog.csdn.net/qq_46497842/article/details/143614315
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！