如何使用 fetch() 将 JSON 数据填充到 HTML 表单中

霞舞 2025-12-31 00:00:00 次阅读

本文讲解如何通过 fetch() 获取 api 返回的 json 数据，并将其动态填入 html 表单的 input 字段中，避免手动逐个赋值，确保数据准确、代码可维护。

在 Web 开发中，常需将后端返回的结构化数据（如用户信息）渲染至表单以支持编辑或预览。与渲染表格不同，表单填充的关键在于精准匹配字段名与表单控件的 name 属性，并正确设置 .value（对、、<select> 等有效）。</select>

以下是一个完整、健壮的实现方案：

✅ 基础 HTML 表单结构（推荐使用 name 属性）

⚠️ 注意：需特殊处理——它不适用 .value = xxx，而应根据布尔值设置 .checked 属性。

✅ 改写后的 fetch + 表单填充逻辑（含错误处理与兼容性）

const url = "/api/contacts/" + localStorage.getItem("paraID");

fetch(url)
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    return res.json();
  })
  .then(data => {
    console.log("API 返回数据:", data);

    // 假设 data 是数组（如 [{ studentID: 1, vorname: 'Marie', ... } ]），取首项
    const itemData = Array.isArray(data) && data.length > 0 ? data[0] : {};

    const form = document.getElementById("myForm");
    if (!form) throw new Error("未找到 ID 为 'myForm' 的表单");

    // 遍历表单所有可命名控件，自动匹配并赋值
    Array.from(form.elements).forEach(el => {
      const fieldName = el.name;
      if (!fieldName || !(fieldName in itemData)) return;

      switch (el.type) {
        case "checkbox":
        case "radio":
          el.checked = Boolean(itemData[fieldName]);
          break;
        default:
          el.value = itemData[fieldName] ?? "";
      }
    });
  })
  .catch(err => {
    console.error("表单填充失败:", err);
    alert("加载数据失败，请检查网络或联系管理员。");
  });