向后端发送数据
注：post方式向后端发送json格式数据。
代码语言：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);
}
}
}存储数据至本地
注：将用户输入的json数据通过浏览器下载方式存储到本地磁盘。
代码语言：javascript复制// 假设当用户点击保存按钮，触发以下方法
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);
}读取本地文件数据
注：读取本地磁盘上的json文件数据。
代码语言：javascript复制// 假设当用户点击本地读取按钮，触发以下方法
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();
}读取服务器文件数据
注：读取服务器上的json文件数据。
代码语言：javascript复制// 假设当用户点击在线读取按钮，触发以下方法
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('无法读取存档文件或文件格式不正确。');
}
}
