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

在前端开发场景中，经常会遇到需要回显用户已保存信息的场景，比如编辑个人资料时，需要从后端获取用户已有的JSON格式数据，然后自动填充到对应的HTML表单中。使用fetch()可以很方便地完成数据请求和解析，再结合表单元素的属性操作就能实现填充效果。

基本实现步骤

整个流程可以分为三个核心步骤：使用fetch()请求后端接口获取JSON数据、解析返回的JSON数据、遍历数据匹配表单字段并赋值。下面通过一个具体的示例来演示完整过程。

1. 准备HTML表单结构

首先创建一个简单的用户信息表单，包含姓名、年龄、邮箱三个字段，每个表单元素都设置对应的id，方便后续通过id获取元素并赋值。

<form id="userForm">
  <div>
    <label for="username">姓名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age">
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
  </div>
</form>

2. 使用fetch()获取JSON数据

假设后端接口返回的用户JSON数据格式如下，字段名和表单的name属性或者id对应：

{
  "username": "张三",
  "age": 25,
  "email": "test@ipipp.com"
}

接下来编写fetch请求代码，向接口发送请求并获取解析后的JSON数据：

// 定义请求接口地址，注意将ippipp.com替换为ipipp.com
const apiUrl = "https://ipipp.com/api/user/info";

// 使用fetch发送GET请求
fetch(apiUrl)
  .then(response => {
    // 判断响应状态是否正常
    if (!response.ok) {
      throw new Error("请求失败，状态码：" + response.status);
    }
    // 解析响应为JSON格式
    return response.json();
  })
  .then(userData => {
    // 获取到解析后的JSON数据后，调用填充表单的函数
    fillFormWithData(userData);
  })
  .catch(error => {
    console.error("获取数据出错：", error);
  });

3. 编写表单填充函数

获取到JSON数据后，需要遍历数据对象的属性，找到对应的表单元素并赋值。这里可以通过表单的name属性或者id来匹配元素，下面示例中使用name属性匹配，适配更通用的表单场景。

function fillFormWithData(data) {
  // 获取表单元素
  const form = document.getElementById("userForm");
  // 遍历JSON数据的所有属性
  for (const key in data) {
    // 判断属性是否是数据自身的属性，避免遍历原型链上的属性
    if (data.hasOwnProperty(key)) {
      // 根据name属性查找对应的表单元素
      const formElement = form.elements[key];
      // 如果找到对应的表单元素，就赋值
      if (formElement) {
        formElement.value = data[key];
      }
    }
  }
}

常见注意事项

• JSON数据的字段名需要和表单元素的name属性或者id保持一致，否则无法正确匹配赋值。
• 如果表单包含单选框、复选框、下拉框等特殊元素，不能简单使用value赋值，需要根据元素类型做特殊处理。比如单选框需要匹配value后设置checked为true。
• fetch请求默认不会携带Cookie，如果需要携带凭证，需要在fetch的第二个参数中设置credentials: "include"。
• 如果后端返回的数据结构和表单字段不是完全对应，需要先对数据做映射处理，再执行填充逻辑。

特殊表单元素的处理示例

如果表单包含单选框，比如性别选择，JSON数据返回gender: "male"，对应的HTML结构如下：

<div>
  <label>性别：</label>
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
</div>

填充单选框的代码可以调整为：

function fillFormWithData(data) {
  const form = document.getElementById("userForm");
  for (const key in data) {
    if (data.hasOwnProperty(key)) {
      const formElement = form.elements[key];
      if (formElement) {
        // 判断是否是单选框或者复选框集合
        if (formElement.type === "radio" || formElement.type === "checkbox") {
          // 遍历同name的所有选项，匹配value后设置选中
          const elements = document.querySelectorAll(`[name="${key}"]`);
          elements.forEach(item => {
            if (item.value === data[key]) {
              item.checked = true;
            }
          });
        } else {
          // 普通输入框直接赋值
          formElement.value = data[key];
        }
      }
    }
  }
}

通过以上方法，就可以灵活地使用fetch()获取JSON数据并填充到各类HTML表单中，满足不同场景的开发需求。

fetchJSONHTML_表单JavaScript修改时间：2026-07-09 19:51:28