javascript中的 fetch API和 $.ajax API-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46497842/article/details/143614315

🐾 （一）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) {
        }
    });
});