用 fetch() 读取外部 json 并自动填充表单，需匹配 name 属性、区分控件类型（checkbox/select 特殊处理）、派发 input/change 事件触发校验，跨域时须通过本地 http 服务解决。
怎么用 JavaScript 读取外部 JSON 并自动填充表单
直接用 fetch() 加载外部 JSON 文件，再遍历字段名匹配表单控件的 name 或 id 属性是最轻量、最可控的方式。别用 iframe 或 document.write，那会破坏 DOM 结构和后续交互。
常见错误是拿到数据后硬编码每个字段赋值，比如写一堆 document.getElementById('username').value = data.username——一旦字段增减就得同步改脚本，极易漏掉或拼错键名。
- 确保 JSON 的 key 名和表单元素的
name属性完全一致（区分大小写） - 只处理
<input>、<textarea></textarea>、<select></select>三类元素，忽略type="button"或type="hidden"（除非你明确需要填 hidden） - 对
<select></select>要设置selectedIndex或匹配option[value]，不能只设.value - 如果 JSON 字段是嵌套对象（如
{"user": {"name": "Alice"}}），需提前扁平化或改用点路径映射（例如user.name → user_name）
遇到跨域请求被拒绝怎么办
浏览器报 Blocked by CORS Policy 时，不是脚本写错了，而是服务端没开权限。本地直接双击 HTML 打开文件（file:// 协议）也会触发同源限制，必须走 HTTP 服务。
开发阶段最简单的解法是用 npx http-server 启一个本地服务（安装后执行即可），把 HTML 和 JSON 放同一目录下，访问 http://localhost:8080/your-form.html 就能绕过限制。
- 不要尝试用
JSONP，现代 API 基本不支持，且只适用于 GET - 别在生产环境用代理插件或禁用浏览器安全策略——那是自欺欺人
- 如果必须调第三方接口，确认对方响应头含
Access-Control-Allow-Origin: *或指定你的域名
表单有复选框（checkbox）和多选下拉（multiple select）怎么填
这类控件的值不是单个字符串，而是数组或布尔状态，直接赋 .value 无效。得分别判断类型，用 checked 和 selected 属性控制。
比如 JSON 中 "hobbies": ["reading", "coding"]，对应多个 <input type="checkbox" name="hobbies" value="reading">，就要遍历所有同名 checkbox，逐个比对 value 是否在数组里。
-
<input type="checkbox">和<input type="radio">都要设.checked = true/false，不能只设.value -
<select multiple></select>需先清空所有option.selected，再对每个匹配项设.selected = true - 若 JSON 里某 checkbox 字段是
false或null，应显式设.checked = false，否则可能保留页面默认状态
为什么填完后提交按钮没反应或校验失败
因为原生表单校验（required、pattern 等）只在用户输入时触发，脚本赋值不会自动触发 input 或 change 事件，导致校验状态没更新。
解决方法是在填完每个字段后手动派发事件：element.dispatchEvent(new Event('input', { bubbles: true }))。对 select 和 checkbox 也一样，否则 checkValidity() 可能返回 false。
- 别漏掉
{ bubbles: true }，不然父级监听可能收不到 - 如果用了第三方表单库（如 Formik、Vue 的 v-model），得按它约定的方式触发更新，不能只操作 DOM
- 时间戳、日期控件（
type="date"）要确保 JSON 里的值是 ISO 格式字符串（"2024-05-20"），否则.value设了也无效
动态填表单这事，难点不在读数据，而在让浏览器“相信”这些值是用户输进去的。事件、类型、校验链路，漏一环就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
