更新学生信息界面优化

Question

修复&优化：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更新学生信息</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: bold; } input { width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; } button { width: 100%; padding: 12px; font-size: 16px; color: #fff; background-color: #007bff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } .alert { margin-top: 20px; padding: 15px; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 5px; display: none; } .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } </style> </head> <body> <div class="container"> <h1>更新学生信息</h1>

text
<div class="input-group">
  <label for="student-id">学号</label>
  <input type="text" id="student-id" placeholder="请输入学号" required>
</div>

<div class="input-group">
  <label for="wechat">微信</label>
  <input type="text" id="wechat" placeholder="请输入微信号" required>
</div>

<button id="update-btn">确认更新</button>

<div class="alert" id="alert-box">
  更新失败，请检查输入或网络连接。
</div>

</div> <script> document.getElementById("update-btn").addEventListener("click", function() { const studentId = document.getElementById("student-id").value.trim(); const wechat = document.getElementById("wechat").value.trim(); // Debug: 输出用户输入的学号和微信号 console.log("学号:", studentId); console.log("微信:", wechat); if (!studentId || !wechat) { showAlert("学号和微信不能为空！", "error"); return; } // 获取之前的数据 fetch('https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds') .then(response => response.text()) .then(previousData => { // Debug: 输出之前的数据 console.log("之前的数据:", previousData); // 叠加新的学号和微信 const newData = previousData + ";" + studentId + ";" + wechat; console.log("新的数据:", newData); // Debug: 输出叠加后的数据 // 更新数据到 API fetch('https://api.textdb.online/update/?key=qewhfjkeshfsdhfkjsdfhkjds&value=' + encodeURIComponent(newData), { method: 'GET' }) .then(response => response.json()) .then(data => { // Debug: 输出返回的数据 console.log("API 返回的数据:", data); // 根据返回的状态进行处理 if (data.status === 1) { showAlert("更新成功！数据已保存。", "success"); // 清空输入框 document.getElementById("student-id").value = ''; document.getElementById("wechat").value = ''; } else { showAlert("更新失败，请稍后重试。", "error"); } }) .catch(error => { console.error("更新失败", error); showAlert("更新失败，请检查网络连接。", "error"); }); }) .catch(error => { console.error("获取数据失败", error); showAlert("获取数据失败，请检查网络连接。", "error"); }); }); function showAlert(message, type) { const alertBox = document.getElementById("alert-box"); alertBox.textContent = message; alertBox.style.display = "block"; // 根据类型改变样式 if (type === "error") { alertBox.classList.remove("success"); alertBox.classList.add("error"); } else if (type === "success") { alertBox.classList.remove("error"); alertBox.classList.add("success"); } } </script> </body> </html>

Answer 1

以下是修复和优化后的代码，包括修正了警告框样式问题、使用了现代的 async/await 语法、增强了输入验证、添加了自动隐藏警告框的功能，并优化了用户体验：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更新学生信息</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      text-align: center;
      color: #333;
    }
    .input-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
    }
    input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }
    button:hover:not(:disabled) {
      background-color: #0056b3;
    }
    .alert {
      margin-top: 20px;
      padding: 15px;
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
      border-radius: 5px;
      display: none;
      transition: opacity 0.5s ease;
    }
    .alert.show {
      display: block;
      opacity: 1;
    }
    .alert.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>更新学生信息</h1>
    
    <div class="input-group">
      <label for="student-id">学号</label>
      <input type="text" id="student-id" placeholder="请输入学号" required>
    </div>
    
    <div class="input-group">
      <label for="wechat">微信</label>
      <input type="text" id="wechat" placeholder="请输入微信号" required>
    </div>
    
    <button id="update-btn">确认更新</button>
    
    <div class="alert" id="alert-box">
      更新失败，请检查输入或网络连接。
    </div>
  </div>

  <script>
    document.getElementById("update-btn").addEventListener("click", async function() {
      const studentIdInput = document.getElementById("student-id");
      const wechatInput = document.getElementById("wechat");
      const updateBtn = document.getElementById("update-btn");
      
      const studentId = studentIdInput.value.trim();
      const wechat = wechatInput.value.trim();
      
      // 清除之前的警告
      hideAlert();

      // 输入验证
      if (!studentId || !wechat) {
        showAlert("学号和微信不能为空！", "error");
        return;
      }

      // 示例：学号必须为数字
      if (!/^\d+$/.test(studentId)) {
        showAlert("学号必须为数字！", "error");
        return;
      }

      // 示例：微信号格式验证（根据实际需求调整）
      if (!/^[a-zA-Z0-9_-]{5,20}$/.test(wechat)) {
        showAlert("微信号格式不正确！", "error");
        return;
      }

      // 禁用按钮防止重复提交
      updateBtn.disabled = true;
      updateBtn.textContent = "更新中...";

      try {
        // 获取之前的数据
        const previousResponse = await fetch('https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds');
        if (!previousResponse.ok) {
          throw new Error("获取数据失败");
        }
        const previousData = await previousResponse.text();
        console.log("之前的数据:", previousData);
        
        // 叠加新的学号和微信
        const newData = previousData ? `${previousData};${studentId};${wechat}` : `${studentId};${wechat}`;
        console.log("新的数据:", newData);

        // 更新数据到 API
        const updateUrl = `https://api.textdb.online/update/?key=qewhfjkeshfsdhfkjsdfhkjds&value=${encodeURIComponent(newData)}`;
        const updateResponse = await fetch(updateUrl, {
          method: 'GET'
        });

        if (!updateResponse.ok) {
          throw new Error("更新请求失败");
        }

        const data = await updateResponse.json();
        console.log("API 返回的数据:", data);
        
        if (data.status === 1) {
          showAlert("更新成功！数据已保存。", "success");
          // 清空输入框
          studentIdInput.value = '';
          wechatInput.value = '';
        } else {
          showAlert("更新失败，请稍后重试。", "error");
        }
      } catch (error) {
        console.error("操作失败", error);
        showAlert("操作失败，请检查网络连接。", "error");
      } finally {
        // 恢复按钮状态
        updateBtn.disabled = false;
        updateBtn.textContent = "确认更新";
      }
    });

    function showAlert(message, type) {
      const alertBox = document.getElementById("alert-box");
      alertBox.textContent = message;
      alertBox.className = "alert"; // 重置类名
      if (type === "success") {
        alertBox.classList.add("success");
      }
      alertBox.classList.add("show");

      // 自动隐藏警告框 after 5 seconds
      setTimeout(hideAlert, 5000);
    }

    function hideAlert() {
      const alertBox = document.getElementById("alert-box");
      alertBox.classList.remove("show");
    }
  </script>

</body>
</html>

修复与优化说明

警告框样式修正：
- 修正了 .alert 类与 showAlert 函数中的类名处理。现在 .alert 默认用于错误消息，.alert.success 用于成功消息。
- 删除了 error 类的添加，因为 .alert 本身已经是错误样式。
使用 async/await：
- 将原本基于 Promise.then 的异步操作改为 async/await，提高代码可读性和维护性。
输入验证增强：
- 添加了对学号是否为纯数字的验证。
- 添加了对微信号格式的基本验证（根据实际需求可以调整正则表达式）。
用户体验优化：
- 在更新过程中禁用按钮，防止用户重复点击，并在操作完成后恢复按钮状态。
- 更新按钮在处理中显示“更新中...”以反馈当前状态。
- 警告框在显示后自动在5秒后隐藏，避免用户需要手动关闭。
错误处理改进：
- 增强了错误捕获机制，确保在任何步骤出错时都能给出用户友好的提示。
- 使用 try...catch...finally 结构来管理异步操作的错误处理和最终状态恢复。
代码组织与可读性：
- 重构了 showAlert 和 hideAlert 函数，使其逻辑更加清晰。
- 添加了注释，帮助理解各部分功能。
其他优化：
- 确保在拼接新数据时，如果之前没有数据，则避免在开头添加分号。
- 为输入框添加 box-sizing: border-box; 以确保内边距和边框不会影响元素的总宽度。

这些改进旨在提升代码的健壮性、可维护性以及用户的使用体验。如果有进一步的需求或特定的功能需要实现，请随时告知！

Answer 2

感谢您提供详细的日志信息。根据您提供的日志，似乎在进行多次更新后，数据并未正确地进行叠加，而是被覆盖。这可能是由于以下几个原因导致的：

API 端点不一致：
- 读取数据 使用了 https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds
- 更新数据 使用了 https://api.textdb.online/update/?key=...
这两个不同的域名可能指向不同的服务或数据库，导致更新的数据没有反映到读取的数据上。因此，每次读取时，您仍然获取的是最初的 Data 1，而不是更新后的数据。
API 更新方法：
- 某些 API 可能要求使用 POST 请求进行更新，而非 GET 请求。
- 确认更新 API 是否需要特定的请求头（如 Content-Type）或身份验证（如 API 密钥）。
缓存问题：
- 读取请求可能由于缓存机制而未能获取到最新的数据。

为了确保数据能够正确地叠加和更新，建议您按照以下步骤进行修正和优化：

1. 确保使用相同的 API 域名进行读取和更新

如果更新数据使用的是 api.textdb.online，那么读取数据也应该使用相同的域名。请确认您的 API 文档，确保读取和更新数据使用的是同一个基础 URL。

假设读取和更新都应该使用 api.textdb.online，则代码应进行如下调整：

2. 修改读取数据的 URL

将读取数据的 URL 从 https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds 修改为 https://api.textdb.online/get/?key=qewhfjkeshfsdhfkjsdfhkjds（具体取决于 API 的实际端点）。

3. 使用正确的请求方法

确认更新 API 是否需要使用 POST 请求。如果需要，调整代码以使用 POST 请求发送更新数据。

4. 完整修正后的代码示例

以下是根据上述建议修正后的完整代码示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更新学生信息</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      text-align: center;
      color: #333;
    }
    .input-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
    }
    input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }
    button:hover:not(:disabled) {
      background-color: #0056b3;
    }
    .alert {
      margin-top: 20px;
      padding: 15px;
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
      border-radius: 5px;
      display: none;
      transition: opacity 0.5s ease;
    }
    .alert.show {
      display: block;
      opacity: 1;
    }
    .alert.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>更新学生信息</h1>
    
    <div class="input-group">
      <label for="student-id">学号</label>
      <input type="text" id="student-id" placeholder="请输入学号" required>
    </div>
    
    <div class="input-group">
      <label for="wechat">微信</label>
      <input type="text" id="wechat" placeholder="请输入微信号" required>
    </div>
    
    <button id="update-btn">确认更新</button>
    
    <div class="alert" id="alert-box">
      更新失败，请检查输入或网络连接。
    </div>
  </div>

  <script>
    document.getElementById("update-btn").addEventListener("click", async function() {
      const studentIdInput = document.getElementById("student-id");
      const wechatInput = document.getElementById("wechat");
      const updateBtn = document.getElementById("update-btn");
      
      const studentId = studentIdInput.value.trim();
      const wechat = wechatInput.value.trim();
      
      // 清除之前的警告
      hideAlert();

      // 输入验证
      if (!studentId || !wechat) {
        showAlert("学号和微信不能为空！", "error");
        return;
      }

      // 示例：学号必须为数字
      if (!/^\d+$/.test(studentId)) {
        showAlert("学号必须为数字！", "error");
        return;
      }

      // 示例：微信号格式验证（根据实际需求调整）
      if (!/^[a-zA-Z0-9_-]{5,20}$/.test(wechat)) {
        showAlert("微信号格式不正确！", "error");
        return;
      }

      // 禁用按钮防止重复提交
      updateBtn.disabled = true;
      updateBtn.textContent = "更新中...";

      try {
        // 获取之前的数据
        const previousResponse = await fetch('https://api.textdb.online/get/?key=qewhfjkeshfsdhfkjsdfhkjds');
        if (!previousResponse.ok) {
          throw new Error("获取数据失败");
        }
        const previousData = await previousResponse.text();
        console.log("之前的数据:", previousData);
        
        // 叠加新的学号和微信
        const newData = previousData ? `${previousData};${studentId};${wechat}` : `${studentId};${wechat}`;
        console.log("新的数据:", newData);

        // 更新数据到 API
        const updateUrl = `https://api.textdb.online/update/?key=qewhfjkeshfsdhfkjsdfhkjds&value=${encodeURIComponent(newData)}`;
        const updateResponse = await fetch(updateUrl, {
          method: 'POST', // 改为 POST 请求
          headers: {
            'Content-Type': 'application/json' // 根据 API 需求调整
          },
          body: JSON.stringify({ value: newData }) // 根据 API 需求调整
        });

        if (!updateResponse.ok) {
          throw new Error("更新请求失败");
        }

        const data = await updateResponse.json();
        console.log("API 返回的数据:", data);
        
        if (data.status === 1) {
          showAlert("更新成功！数据已保存。", "success");
          // 清空输入框
          studentIdInput.value = '';
          wechatInput.value = '';
        } else {
          showAlert("更新失败，请稍后重试。", "error");
        }
      } catch (error) {
        console.error("操作失败", error);
        showAlert("操作失败，请检查网络连接。", "error");
      } finally {
        // 恢复按钮状态
        updateBtn.disabled = false;
        updateBtn.textContent = "确认更新";
      }
    });

    function showAlert(message, type) {
      const alertBox = document.getElementById("alert-box");
      alertBox.textContent = message;
      alertBox.className = "alert"; // 重置类名
      if (type === "success") {
        alertBox.classList.add("success");
      }
      alertBox.classList.add("show");

      // 自动隐藏警告框 after 5 seconds
      setTimeout(hideAlert, 5000);
    }

    function hideAlert() {
      const alertBox = document.getElementById("alert-box");
      alertBox.classList.remove("show");
    }
  </script>

</body>
</html>

修正与优化说明

统一 API 域名：
- 读取数据：将 https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds 修改为 https://api.textdb.online/get/?key=qewhfjkeshfsdhfkjsdfhkjds。请根据您的 API 文档确认正确的读取端点。
- 更新数据：确保更新请求也指向 https://api.textdb.online/update/。
更新请求方法和头部：
- 将更新请求方法从 GET 改为 POST，因为多数 API 的更新操作通常使用 POST、PUT 或 PATCH 方法。
- 添加 Content-Type: application/json 请求头，以确保服务器正确解析请求体。
- 使用 JSON.stringify 将请求体转换为 JSON 格式。请根据您的 API 要求调整请求体格式。
API 请求参数：
- 根据 API 文档，确保传递正确的参数和数据格式。例如，有些 API 可能需要额外的身份验证或特定的参数结构。
调试建议：
- 验证 API 响应：在浏览器的开发者工具（通常按 F12 打开）中，检查网络请求，确保更新请求成功，并查看响应内容是否符合预期。
- 检查 CORS 设置：确保 API 允许来自您网站的跨域请求。如果遇到 CORS 错误，您需要在服务器端配置相应的 CORS 策略。
- 日志记录：保留 console.log 语句，以便在开发过程中监控数据流和调试问题。

数据格式优化：

使用 JSON 存储数据：将数据存储为 JSON 格式，而不是使用分号分隔的字符串，可以更方便地管理和解析。如下所示：

javascript
// 假设 previousData 是一个 JSON 数组
let dataArray = [];
if (previousData) {
  dataArray = JSON.parse(previousData);
}
dataArray.push({ studentId, wechat });
const newData = JSON.stringify(dataArray);

这将使数据的结构更加清晰和易于维护。

其他建议：
- 输入去重：在添加新数据之前，检查是否已经存在相同的 studentId，以防止重复记录。
- 更详细的错误信息：在警告框中提供更具体的错误信息，帮助用户理解问题所在。

示例：使用 JSON 存储数据

以下是将数据存储为 JSON 数组的示例代码：

javascript
// 获取之前的数据
const previousResponse = await fetch('https://api.textdb.online/get/?key=qewhfjkeshfsdhfkjsdfhkjds');
if (!previousResponse.ok) {
  throw new Error("获取数据失败");
}
const previousData = await previousResponse.text();
console.log("之前的数据:", previousData);

// 解析为数组
let dataArray = [];
if (previousData) {
  try {
    dataArray = JSON.parse(previousData);
    if (!Array.isArray(dataArray)) {
      throw new Error("数据格式不正确");
    }
  } catch (e) {
    console.error("解析数据失败:", e);
    showAlert("服务器数据格式错误。", "error");
    return;
  }
}

// 添加新数据
dataArray.push({ studentId, wechat });
console.log("新的数据数组:", dataArray);

// 转换为 JSON 字符串
const newData = JSON.stringify(dataArray);
console.log("新的数据:", newData);

// 更新数据到 API
const updateUrl = `https://api.textdb.online/update/?key=qewhfjkeshfsdhfkjsdfhkjds`;
const updateResponse = await fetch(updateUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: newData
});

最后

请根据您的具体 API 文档进行相应的调整。确保读取和更新操作都指向正确的端点，并使用正确的请求方法和数据格式。如果问题依然存在，建议联系 API 提供方获取更详细的支持。

如果有进一步的问题或需要更多的帮助，请随时告知！

Answer 3

感谢您提供详细的日志信息和在线文本数据库（TextDB）的API文档。根据您描述的问题，数据在更新时被覆盖而非叠加，这可能是由于读取和更新数据时使用了不一致的API端点，或者请求方法不正确导致的。

问题分析

API端点不一致：
- 读取数据：原始代码使用了 https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds。
- 更新数据：原始代码使用了 https://api.textdb.online/update/?key=...。
这两个不同的域名可能指向不同的服务，导致读取和更新的数据不一致。因此，每次读取时仍然获取的是最初的 Data 1，而不是更新后的数据。
请求方法和参数：
- 根据您提供的API文档，更新操作应优先使用 POST 请求，并且需要正确设置请求参数和头部。
- 读取数据应使用 https://textdb.online/[key]，而非 https://api.textdb.online/get/?key=...。

修复与优化方案

为了确保数据能够正确地叠加和更新，建议按照以下步骤进行修正：

统一API端点：
- 读取数据：使用 https://textdb.online/[key]。
- 更新数据：使用 https://api.textdb.online/update/，优先采用 POST 请求。
正确的请求方法和参数：
- 读取数据：简单的 GET 请求到 https://textdb.online/[key]。
- 更新数据：POST 请求到 https://api.textdb.online/update/，并在请求体中包含 key 和 value 参数。
确保数据叠加：
- 在更新前，先读取现有数据，并在其基础上叠加新的数据，再将更新后的数据发送给API。
增强输入验证和用户体验：
- 添加更多的输入验证，确保数据格式正确。
- 在更新过程中禁用按钮，防止重复提交。
- 提供更详细的错误信息，帮助用户理解问题。

修正后的完整代码示例

以下是根据上述建议修正和优化后的完整代码：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>更新学生信息</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      text-align: center;
      color: #333;
    }
    .input-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
    }
    input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      color: #fff;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    button:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }
    button:hover:not(:disabled) {
      background-color: #0056b3;
    }
    .alert {
      margin-top: 20px;
      padding: 15px;
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
      border-radius: 5px;
      display: none;
      transition: opacity 0.5s ease;
    }
    .alert.show {
      display: block;
      opacity: 1;
    }
    .alert.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>更新学生信息</h1>
    
    <div class="input-group">
      <label for="student-id">学号</label>
      <input type="text" id="student-id" placeholder="请输入学号" required>
    </div>
    
    <div class="input-group">
      <label for="wechat">微信</label>
      <input type="text" id="wechat" placeholder="请输入微信号" required>
    </div>
    
    <button id="update-btn">确认更新</button>
    
    <div class="alert" id="alert-box">
      更新失败，请检查输入或网络连接。
    </div>
  </div>

  <script>
    document.getElementById("update-btn").addEventListener("click", async function() {
      const studentIdInput = document.getElementById("student-id");
      const wechatInput = document.getElementById("wechat");
      const updateBtn = document.getElementById("update-btn");
      
      const studentId = studentIdInput.value.trim();
      const wechat = wechatInput.value.trim();
      
      // 清除之前的警告
      hideAlert();

      // 输入验证
      if (!studentId || !wechat) {
        showAlert("学号和微信不能为空！", "error");
        return;
      }

      // 示例：学号必须为数字
      if (!/^\d+$/.test(studentId)) {
        showAlert("学号必须为数字！", "error");
        return;
      }

      // 示例：微信号格式验证（根据实际需求调整）
      if (!/^[a-zA-Z0-9_-]{5,20}$/.test(wechat)) {
        showAlert("微信号格式不正确！", "error");
        return;
      }

      // 禁用按钮防止重复提交
      updateBtn.disabled = true;
      updateBtn.textContent = "更新中...";

      const key = "qewhfjkeshfsdhfkjsdfhkjds"; // 请确保这是您的正确key

      try {
        // 获取之前的数据
        const getUrl = `https://textdb.online/${key}`;
        const previousResponse = await fetch(getUrl);

        let previousData = "";
        if (previousResponse.ok) {
          previousData = await previousResponse.text();
          console.log("之前的数据:", previousData);
        } else if (previousResponse.status === 404) {
          console.log("记录不存在，准备创建新记录。");
        } else {
          throw new Error("获取数据失败，状态码：" + previousResponse.status);
        }
        
        // 叠加新的学号和微信
        const newEntry = `${studentId};${wechat}`;
        const newData = previousData ? `${previousData};${newEntry}` : newEntry;
        console.log("新的数据:", newData);

        // 更新数据到 API
        const updateUrl = `https://api.textdb.online/update/`;
        const updateParams = new URLSearchParams();
        updateParams.append('key', key);
        updateParams.append('value', newData);

        const updateResponse = await fetch(updateUrl, {
          method: 'POST', // 使用 POST 方法
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: updateParams.toString()
        });

        if (!updateResponse.ok) {
          throw new Error("更新请求失败，状态码：" + updateResponse.status);
        }

        const data = await updateResponse.json();
        console.log("API 返回的数据:", data);
        
        if (data.status === 1) {
          showAlert("更新成功！数据已保存。", "success");
          // 清空输入框
          studentIdInput.value = '';
          wechatInput.value = '';
        } else {
          showAlert("更新失败，请稍后重试。", "error");
        }
      } catch (error) {
        console.error("操作失败", error);
        showAlert("操作失败，请检查网络连接。", "error");
      } finally {
        // 恢复按钮状态
        updateBtn.disabled = false;
        updateBtn.textContent = "确认更新";
      }
    });

    function showAlert(message, type) {
      const alertBox = document.getElementById("alert-box");
      alertBox.textContent = message;
      alertBox.className = "alert"; // 重置类名
      if (type === "success") {
        alertBox.classList.add("success");
      }
      alertBox.classList.add("show");

      // 自动隐藏警告框 after 5 seconds
      setTimeout(hideAlert, 5000);
    }

    function hideAlert() {
      const alertBox = document.getElementById("alert-box");
      alertBox.classList.remove("show");
    }
  </script>

</body>
</html>

主要修正与优化说明

统一API端点：
- 读取数据：使用 https://textdb.online/qewhfjkeshfsdhfkjsdfhkjds。
- 更新数据：使用 https://api.textdb.online/update/，并采用 POST 请求。
正确的请求方法和参数：
- 读取数据：简单的 GET 请求到 https://textdb.online/[key]。
- 更新数据：POST 请求到 https://api.textdb.online/update/，并在请求体中包含 key 和 value 参数，使用 application/x-www-form-urlencoded 编码。
确保数据叠加：
- 在更新前，先读取现有数据，如果存在，则在其基础上叠加新的数据（使用 ; 作为分隔符）。
- 如果之前没有数据，则直接写入新的数据。
输入验证增强：
- 学号：必须为纯数字。
- 微信号：基于正则表达式的格式验证（可根据实际需求调整）。
用户体验优化：
- 在更新过程中禁用按钮，防止用户重复点击，并在操作完成后恢复按钮状态。
- 更新按钮在处理中显示“更新中...”以反馈当前状态。
- 警告框在显示后自动在5秒后隐藏，避免用户需要手动关闭。
错误处理改进：
- 根据HTTP状态码和API返回的 status 字段，提供更具体的错误信息。
- 捕获网络错误和API错误，确保用户能够收到明确的反馈。
日志记录：
- 使用 console.log 输出关键步骤的数据，便于调试和监控。

注意事项

API请求限制：
- 创建：200 条 / IP / 日
- 更新：10,000 条 / IP / 日
- 删除：10,000 条 / IP / 日
- 读取：100,000 条 / IP / 日
请确保您的应用在这些限制范围内运行，避免超出限制导致请求失败。
安全性：
- 由于没有密码鉴权保护，确保 key 的安全性，建议使用随机生成 30 位及以上的 key，并避免公开泄露。
- TextDB 不提供访问密码保护，建议设置 key 长度为 20 位及以上，或添加专属的前缀，以降低碰撞概率，减少业务风险。
数据存储格式：
- 当前采用 ; 分隔的文本格式存储数据，适用于简单的数据叠加。如果数据结构变得复杂，建议考虑使用更结构化的数据格式（如JSON），但这需要API支持。
自动删除：
- TextDB 会在没有更新操作1年后自动删除记录，建议在不需要数据时主动删除，避免不必要的数据存储。
CORS：
- TextDB 默认支持跨域请求，无需额外配置。但在开发过程中，仍需注意跨域问题，确保API请求能够顺利完成。
API文档更新：
- 由于API文档可能会更新不及时，建议定期查看 TextDB 官网文档，获取最新的文档细节，确保API调用方式正确。

调试建议

使用浏览器开发者工具：
- 按 F12 打开开发者工具，查看网络请求，确保读取和更新请求成功，并检查响应内容是否符合预期。
检查控制台日志：
- 利用 console.log 语句，监控数据流和调试问题。
处理CORS错误：
- 如果遇到CORS错误，请确保API端点正确，并检查请求头是否设置正确。
验证API响应：
- 确保API返回的数据格式符合预期，例如 status 字段为 1 表示成功。

最后

通过以上修正和优化，您的应用应该能够正确地叠加和更新学生信息，而不是覆盖之前的数据。如果问题依然存在，请按照以下步骤进一步排查：

确认API端点：
- 确保读取和更新操作使用的是正确的API端点。
验证请求方法和参数：
- 确保 POST 请求的参数和格式符合 TextDB 的要求。
检查网络连接和API状态：
- 确保网络连接正常，并且 TextDB 服务没有中断。
联系API提供方：
- 如果问题依然无法解决，建议联系 TextDB 提供方获取更详细的支持。

如果您有任何进一步的问题或需要更多的帮助，请随时告知！

更新学生信息界面优化

Câu hỏi

Suy nghĩ

Trả lời

修复与优化说明

Câu hỏi

Suy nghĩ

Trả lời

1. 确保使用相同的 API 域名进行读取和更新

2. 修改读取数据的 URL

3. 使用正确的请求方法

4. 完整修正后的代码示例

修正与优化说明

示例：使用 JSON 存储数据

最后

Câu hỏi

Suy nghĩ

Trả lời

问题分析

修复与优化方案

修正后的完整代码示例

主要修正与优化说明

注意事项

调试建议

最后

Chia sẻ Q&A này