JavaScript常用功能代码及心得

// 假设当用户点击提交按钮，触发以下方法
async function submitData() {    
  //定义一个变量jsonData，将全局变量data内的数据转换为json格式并传入jsonData
  const jsonData = JSON.stringify(data);
      try {
        //通过fetch方法向后端接口发送POST请求传递数据
        const response = await fetch('http://114.114.114.114:2000/api/a', {
          method: 'POST',     //规定传递方式为post
          headers: {
            'Content-Type': 'application/json',     //规定传递数据格式为json
          },
          body: jsonData,      //将要传输的数据jsonData在body里发送
        });
        //如果后端接收数据成功后返回数值为200-299，则为ok，即为提交成功
        if (response.ok) {
		//等待并解析响应体为JSON，然后将解析后的结果赋值给responseData常量，并在解析完成后弹出一个提示框显示“数据已成功在线存档！”
          const responseData = await response.json();
            alert('数据已成功提交！');
        }
      } catch (error) {
        alert('无法提交，请稍后重试。');
        console.error('Error:', error);
      }
  } 
}

// 假设当用户点击保存按钮，触发以下方法
async function submitData() {   
    //定义一个变量jsonData，将全局变量data内的数据转换为json格式并传入jsonData
    const jsonData = JSON.stringify(data);
    //定义一个变量blob用于存储下载至本地磁盘的数据，设置下载为json文件类型
    const blob = new Blob([jsonData], { type: 'application/json' });   
    //为此时存储着数据的json文件blob创建一个URL下载链接
    const url = URL.createObjectURL(blob);
    //定义一个变量a，创建一个<a>元素（超链接）并将其引用保存在变量a中
    const a = document.createElement('a');
    //将存储着数据的json文件blob的URL发送给a.href，即给超链接指定链接
    a.href = url;
//设置a.download的属性为json格式，文件名为save。当用户点击该链接时浏览器下载该链接
    a.download = 'save.json';
    a.click();
    URL.revokeObjectURL(url);
}

// 假设当用户点击本地读取按钮，触发以下方法
async function submitData() {    
//当用户选择了该文件输入控件中的文件时，会触发addEventListener方法中的'change' 事件
  fileInput.addEventListener('change', function () {  
//定义一个变量file，fileInput方法获取用户选择的文件
    const file = fileInput.files[0];  
///如果文件内容不为空，则执行以下内容
    if (file) {  
//FileReader方法异步读取用户选择的文件中的内容并保存至reader变量
      const reader = new FileReader();  
  // 定义当文件读取成功完成时执行的回调函数
      reader.onload = function (e) {  
        try {  
		  //将选择文件内容读取并赋值给data变量
          const data = JSON.parse(e.target.result);  
          // 将读取到的data值分别赋值给全局变量
//此days是前端js代码中的全局变量，全局变量可以用来保存数据
//全局变量保存的数据在整个代码文件运行中不会销毁
          days = data.days;    
          morningRoutineDays = data.morningRoutineDays;
          caloriesBurned = data.caloriesBurned; 
          weightLost = data.weightLost;  
          displayArea.innerHTML  += data.failures;
        } catch (error) {  
          alert('无法读取存档文件或文件格式不正确。');  
        }  
      };  
      reader.readAsText(file);  
    } else {  
      alert('请选择一个存档文件！');  
    }  
  }, { once: true });  
  fileInput.click();  
}

// 假设当用户点击在线读取按钮，触发以下方法
async function submitData() { 
try {
      //访问web服务器解析目录（/var/www/html）下的/a/save.json文件
//如果你的web服务器解析路径为（/var/www/），则访问的是/var/www/a/save.json文件
//定义一个变量response，用于接收fetch方法读取的服务器指定路径的.json文件
      const response = await fetch('/a/save.json');
      if (!response.ok) {
        throw new Error('无法读取存档文件或文件不存在！');
      }
//定义一个变量cloud_data ，response.json()方法解析响应体为JSON格式的数据
      const cloud_data = await response.json();   
 // 将读取到的cloud_data 值分别赋值给全局变量
//此days是前端js代码中的全局变量，全局变量可以用来保存数据
//全局变量保存的数据在整个代码文件运行中不会销毁
      days = cloud_data.days;    
      morningRoutineDays = cloud_data.morningRoutineDays;
      caloriesBurned = cloud_data.caloriesBurned;
      weightLost = cloud_data.weightLost;
      displayArea.innerHTML += cloud_data.failures;
      // 调用updateDisplay方法更新前端显示
      updateDisplay();
    } catch (error) {
      alert('无法读取存档文件或文件格式不正确。');
    }
}