[{"data":1,"prerenderedAt":802},["ShallowReactive",2],{"post-/blog/json-form-data":3,"related-/blog/json-form-data":205},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":11,"keywords":12,"body":16,"_type":199,"_id":200,"_source":201,"_file":202,"_stem":203,"_extension":204},"/blog/json-form-data","blog",false,"","JSON 与表单数据转换","前端表单常需与 JSON 互转，本文介绍序列化、嵌套表单与提交技巧。","2026-08-19","场景",[13,14,15],"json表单","form json","表单序列化",{"type":17,"children":18,"toc":191},"root",[19,27,33,39,50,55,60,65,148,153,175,180,185],{"type":20,"tag":21,"props":22,"children":24},"element","h1",{"id":23},"json-与表单数据转换",[25],{"type":26,"value":8},"text",{"type":20,"tag":28,"props":29,"children":30},"p",{},[31],{"type":26,"value":32},"前端表单数据常需转为 JSON 提交 API，或将 JSON 回填表单，需处理嵌套与数组。",{"type":20,"tag":34,"props":35,"children":37},"h2",{"id":36},"转换方式",[38],{"type":26,"value":36},{"type":20,"tag":28,"props":40,"children":41},{},[42,44,48],{"type":26,"value":43},"FormData 遍历构建对象、name 用点路径表达嵌套、数组用 ",{"type":20,"tag":45,"props":46,"children":47},"span",{},[],{"type":26,"value":49}," 后缀。",{"type":20,"tag":34,"props":51,"children":53},{"id":52},"库推荐",[54],{"type":26,"value":52},{"type":20,"tag":28,"props":56,"children":57},{},[58],{"type":26,"value":59},"qs、form-serialize、或框架内置（如 Vue v-model）。",{"type":20,"tag":34,"props":61,"children":63},{"id":62},"代码示例",[64],{"type":26,"value":62},{"type":20,"tag":66,"props":67,"children":71},"pre",{"className":68,"code":69,"language":70,"meta":7,"style":7},"language-json shiki shiki-themes github-dark","{\"user\": {\"name\": \"x\", \"tags\": [\"a\", \"b\"]}}\n","json",[72],{"type":20,"tag":73,"props":74,"children":75},"code",{"__ignoreMap":7},[76],{"type":20,"tag":45,"props":77,"children":80},{"class":78,"line":79},"line",1,[81,87,93,98,103,108,114,119,124,129,134,138,143],{"type":20,"tag":45,"props":82,"children":84},{"style":83},"--shiki-default:#E1E4E8",[85],{"type":26,"value":86},"{",{"type":20,"tag":45,"props":88,"children":90},{"style":89},"--shiki-default:#79B8FF",[91],{"type":26,"value":92},"\"user\"",{"type":20,"tag":45,"props":94,"children":95},{"style":83},[96],{"type":26,"value":97},": {",{"type":20,"tag":45,"props":99,"children":100},{"style":89},[101],{"type":26,"value":102},"\"name\"",{"type":20,"tag":45,"props":104,"children":105},{"style":83},[106],{"type":26,"value":107},": ",{"type":20,"tag":45,"props":109,"children":111},{"style":110},"--shiki-default:#9ECBFF",[112],{"type":26,"value":113},"\"x\"",{"type":20,"tag":45,"props":115,"children":116},{"style":83},[117],{"type":26,"value":118},", ",{"type":20,"tag":45,"props":120,"children":121},{"style":89},[122],{"type":26,"value":123},"\"tags\"",{"type":20,"tag":45,"props":125,"children":126},{"style":83},[127],{"type":26,"value":128},": [",{"type":20,"tag":45,"props":130,"children":131},{"style":110},[132],{"type":26,"value":133},"\"a\"",{"type":20,"tag":45,"props":135,"children":136},{"style":83},[137],{"type":26,"value":118},{"type":20,"tag":45,"props":139,"children":140},{"style":110},[141],{"type":26,"value":142},"\"b\"",{"type":20,"tag":45,"props":144,"children":145},{"style":83},[146],{"type":26,"value":147},"]}}\n",{"type":20,"tag":34,"props":149,"children":151},{"id":150},"推荐在线工具",[152],{"type":26,"value":150},{"type":20,"tag":154,"props":155,"children":156},"ul",{},[157,167],{"type":20,"tag":158,"props":159,"children":160},"li",{},[161],{"type":20,"tag":162,"props":163,"children":165},"a",{"href":164},"/flatten",[166],{"type":26,"value":164},{"type":20,"tag":158,"props":168,"children":169},{},[170],{"type":20,"tag":162,"props":171,"children":173},{"href":172},"/format",[174],{"type":26,"value":172},{"type":20,"tag":34,"props":176,"children":178},{"id":177},"小结",[179],{"type":26,"value":177},{"type":20,"tag":28,"props":181,"children":182},{},[183],{"type":26,"value":184},"前端表单常需与 JSON 互转，本文介绍序列化、嵌套表单与提交技巧。 JSONDog 提供全套 JSON 在线工具，纯前端、零上传、中英双语，欢迎免费使用。",{"type":20,"tag":186,"props":187,"children":188},"style",{},[189],{"type":26,"value":190},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":192,"depth":192,"links":193},2,[194,195,196,197,198],{"id":36,"depth":192,"text":36},{"id":52,"depth":192,"text":52},{"id":62,"depth":192,"text":62},{"id":150,"depth":192,"text":150},{"id":177,"depth":192,"text":177},"markdown","content:blog:json-form-data.md","content","blog/json-form-data.md","blog/json-form-data","md",[206,359,498,636],{"_path":207,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":208,"description":209,"date":10,"category":11,"keywords":210,"body":214,"_type":199,"_id":356,"_source":201,"_file":357,"_stem":358,"_extension":204},"/blog/json-as-config","JSON 作为配置文件","JSON 常用作配置文件，但不支持注释，可考虑 JSON5 或 JSONC 替代。",[211,212,213],"json配置","json config","jsonc",{"type":17,"children":215,"toc":349},[216,221,226,231,236,241,246,250,314,318,336,340,345],{"type":20,"tag":21,"props":217,"children":219},{"id":218},"json-作为配置文件",[220],{"type":26,"value":208},{"type":20,"tag":28,"props":222,"children":223},{},[224],{"type":26,"value":225},"JSON 常用作配置文件（如 tsconfig、package.json），但不支持注释，编辑不便。",{"type":20,"tag":34,"props":227,"children":229},{"id":228},"优缺点",[230],{"type":26,"value":228},{"type":20,"tag":28,"props":232,"children":233},{},[234],{"type":26,"value":235},"优点：标准、解析快、跨语言；缺点：无注释、无多行字符串、尾逗号非法。",{"type":20,"tag":34,"props":237,"children":239},{"id":238},"替代方案",[240],{"type":26,"value":238},{"type":20,"tag":28,"props":242,"children":243},{},[244],{"type":26,"value":245},"JSON5、JSONC（带注释）、YAML、TOML 更适合人工编辑的配置。",{"type":20,"tag":34,"props":247,"children":248},{"id":62},[249],{"type":26,"value":62},{"type":20,"tag":66,"props":251,"children":253},{"className":68,"code":252,"language":70,"meta":7,"style":7},"{\n  \"compilerOptions\": {\n    \"target\": \"es2020\"\n  }\n}\n",[254],{"type":20,"tag":73,"props":255,"children":256},{"__ignoreMap":7},[257,265,278,296,305],{"type":20,"tag":45,"props":258,"children":259},{"class":78,"line":79},[260],{"type":20,"tag":45,"props":261,"children":262},{"style":83},[263],{"type":26,"value":264},"{\n",{"type":20,"tag":45,"props":266,"children":267},{"class":78,"line":192},[268,273],{"type":20,"tag":45,"props":269,"children":270},{"style":89},[271],{"type":26,"value":272},"  \"compilerOptions\"",{"type":20,"tag":45,"props":274,"children":275},{"style":83},[276],{"type":26,"value":277},": {\n",{"type":20,"tag":45,"props":279,"children":281},{"class":78,"line":280},3,[282,287,291],{"type":20,"tag":45,"props":283,"children":284},{"style":89},[285],{"type":26,"value":286},"    \"target\"",{"type":20,"tag":45,"props":288,"children":289},{"style":83},[290],{"type":26,"value":107},{"type":20,"tag":45,"props":292,"children":293},{"style":110},[294],{"type":26,"value":295},"\"es2020\"\n",{"type":20,"tag":45,"props":297,"children":299},{"class":78,"line":298},4,[300],{"type":20,"tag":45,"props":301,"children":302},{"style":83},[303],{"type":26,"value":304},"  }\n",{"type":20,"tag":45,"props":306,"children":308},{"class":78,"line":307},5,[309],{"type":20,"tag":45,"props":310,"children":311},{"style":83},[312],{"type":26,"value":313},"}\n",{"type":20,"tag":34,"props":315,"children":316},{"id":150},[317],{"type":26,"value":150},{"type":20,"tag":154,"props":319,"children":320},{},[321,328],{"type":20,"tag":158,"props":322,"children":323},{},[324],{"type":20,"tag":162,"props":325,"children":326},{"href":172},[327],{"type":26,"value":172},{"type":20,"tag":158,"props":329,"children":330},{},[331],{"type":20,"tag":162,"props":332,"children":334},{"href":333},"/validate",[335],{"type":26,"value":333},{"type":20,"tag":34,"props":337,"children":338},{"id":177},[339],{"type":26,"value":177},{"type":20,"tag":28,"props":341,"children":342},{},[343],{"type":26,"value":344},"JSON 常用作配置文件，但不支持注释，可考虑 JSON5 或 JSONC 替代。 JSONDog 提供全套 JSON 在线工具，纯前端、零上传、中英双语，欢迎免费使用。",{"type":20,"tag":186,"props":346,"children":347},{},[348],{"type":26,"value":190},{"title":7,"searchDepth":192,"depth":192,"links":350},[351,352,353,354,355],{"id":228,"depth":192,"text":228},{"id":238,"depth":192,"text":238},{"id":62,"depth":192,"text":62},{"id":150,"depth":192,"text":150},{"id":177,"depth":192,"text":177},"content:blog:json-as-config.md","blog/json-as-config.md","blog/json-as-config",{"_path":360,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":361,"description":362,"date":10,"category":11,"keywords":363,"body":367,"_type":199,"_id":495,"_source":201,"_file":496,"_stem":497,"_extension":204},"/blog/json-caching","JSON 缓存策略","JSON 响应可缓存于 CDN、Redis、本地，本文介绍缓存键设计与失效策略。",[364,365,366],"json缓存","api缓存","redis json",{"type":17,"children":368,"toc":488},[369,374,379,384,389,394,399,403,453,457,475,479,484],{"type":20,"tag":21,"props":370,"children":372},{"id":371},"json-缓存策略",[373],{"type":26,"value":361},{"type":20,"tag":28,"props":375,"children":376},{},[377],{"type":26,"value":378},"JSON 响应缓存可大幅提升性能，需合理设计缓存键与失效策略。",{"type":20,"tag":34,"props":380,"children":382},{"id":381},"缓存层",[383],{"type":26,"value":381},{"type":20,"tag":28,"props":385,"children":386},{},[387],{"type":26,"value":388},"CDN 缓存静态 JSON、Redis 缓存热点接口、浏览器缓存带 ETag。",{"type":20,"tag":34,"props":390,"children":392},{"id":391},"失效策略",[393],{"type":26,"value":391},{"type":20,"tag":28,"props":395,"children":396},{},[397],{"type":26,"value":398},"TTL 过期、版本号键、主动清除，注意一致性。",{"type":20,"tag":34,"props":400,"children":401},{"id":62},[402],{"type":26,"value":62},{"type":20,"tag":66,"props":404,"children":406},{"className":68,"code":405,"language":70,"meta":7,"style":7},"{\"key\": \"user:1:profile\", \"ttl\": 3600}\n",[407],{"type":20,"tag":73,"props":408,"children":409},{"__ignoreMap":7},[410],{"type":20,"tag":45,"props":411,"children":412},{"class":78,"line":79},[413,417,422,426,431,435,440,444,449],{"type":20,"tag":45,"props":414,"children":415},{"style":83},[416],{"type":26,"value":86},{"type":20,"tag":45,"props":418,"children":419},{"style":89},[420],{"type":26,"value":421},"\"key\"",{"type":20,"tag":45,"props":423,"children":424},{"style":83},[425],{"type":26,"value":107},{"type":20,"tag":45,"props":427,"children":428},{"style":110},[429],{"type":26,"value":430},"\"user:1:profile\"",{"type":20,"tag":45,"props":432,"children":433},{"style":83},[434],{"type":26,"value":118},{"type":20,"tag":45,"props":436,"children":437},{"style":89},[438],{"type":26,"value":439},"\"ttl\"",{"type":20,"tag":45,"props":441,"children":442},{"style":83},[443],{"type":26,"value":107},{"type":20,"tag":45,"props":445,"children":446},{"style":89},[447],{"type":26,"value":448},"3600",{"type":20,"tag":45,"props":450,"children":451},{"style":83},[452],{"type":26,"value":313},{"type":20,"tag":34,"props":454,"children":455},{"id":150},[456],{"type":26,"value":150},{"type":20,"tag":154,"props":458,"children":459},{},[460,468],{"type":20,"tag":158,"props":461,"children":462},{},[463],{"type":20,"tag":162,"props":464,"children":466},{"href":465},"/minify",[467],{"type":26,"value":465},{"type":20,"tag":158,"props":469,"children":470},{},[471],{"type":20,"tag":162,"props":472,"children":473},{"href":172},[474],{"type":26,"value":172},{"type":20,"tag":34,"props":476,"children":477},{"id":177},[478],{"type":26,"value":177},{"type":20,"tag":28,"props":480,"children":481},{},[482],{"type":26,"value":483},"JSON 响应可缓存于 CDN、Redis、本地，本文介绍缓存键设计与失效策略。 JSONDog 提供全套 JSON 在线工具，纯前端、零上传、中英双语，欢迎免费使用。",{"type":20,"tag":186,"props":485,"children":486},{},[487],{"type":26,"value":190},{"title":7,"searchDepth":192,"depth":192,"links":489},[490,491,492,493,494],{"id":381,"depth":192,"text":381},{"id":391,"depth":192,"text":391},{"id":62,"depth":192,"text":62},{"id":150,"depth":192,"text":150},{"id":177,"depth":192,"text":177},"content:blog:json-caching.md","blog/json-caching.md","blog/json-caching",{"_path":499,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":500,"description":501,"date":10,"category":11,"keywords":502,"body":506,"_type":199,"_id":633,"_source":201,"_file":634,"_stem":635,"_extension":204},"/blog/json-i18n","JSON 与国际化方案","JSON 是 i18n 资源文件常用格式，按语言分文件，键值映射文案。",[503,504,505],"json i18n","国际化json","多语言json",{"type":17,"children":507,"toc":626},[508,513,518,523,528,533,538,542,592,596,613,617,622],{"type":20,"tag":21,"props":509,"children":511},{"id":510},"json-与国际化方案",[512],{"type":26,"value":500},{"type":20,"tag":28,"props":514,"children":515},{},[516],{"type":26,"value":517},"JSON 是国际化资源文件的常用格式，按语言分文件，键值对映射文案。",{"type":20,"tag":34,"props":519,"children":521},{"id":520},"结构设计",[522],{"type":26,"value":520},{"type":20,"tag":28,"props":524,"children":525},{},[526],{"type":26,"value":527},"按语言分文件（en.json、zh.json），键用点路径或嵌套对象组织命名空间。",{"type":20,"tag":34,"props":529,"children":531},{"id":530},"使用",[532],{"type":26,"value":530},{"type":20,"tag":28,"props":534,"children":535},{},[536],{"type":26,"value":537},"前端 i18n 库加载对应语言 JSON，按键取文案，支持插值与复数。",{"type":20,"tag":34,"props":539,"children":540},{"id":62},[541],{"type":26,"value":62},{"type":20,"tag":66,"props":543,"children":545},{"className":68,"code":544,"language":70,"meta":7,"style":7},"{\"welcome\": \"欢迎\", \"login\": \"登录\"}\n",[546],{"type":20,"tag":73,"props":547,"children":548},{"__ignoreMap":7},[549],{"type":20,"tag":45,"props":550,"children":551},{"class":78,"line":79},[552,556,561,565,570,574,579,583,588],{"type":20,"tag":45,"props":553,"children":554},{"style":83},[555],{"type":26,"value":86},{"type":20,"tag":45,"props":557,"children":558},{"style":89},[559],{"type":26,"value":560},"\"welcome\"",{"type":20,"tag":45,"props":562,"children":563},{"style":83},[564],{"type":26,"value":107},{"type":20,"tag":45,"props":566,"children":567},{"style":110},[568],{"type":26,"value":569},"\"欢迎\"",{"type":20,"tag":45,"props":571,"children":572},{"style":83},[573],{"type":26,"value":118},{"type":20,"tag":45,"props":575,"children":576},{"style":89},[577],{"type":26,"value":578},"\"login\"",{"type":20,"tag":45,"props":580,"children":581},{"style":83},[582],{"type":26,"value":107},{"type":20,"tag":45,"props":584,"children":585},{"style":110},[586],{"type":26,"value":587},"\"登录\"",{"type":20,"tag":45,"props":589,"children":590},{"style":83},[591],{"type":26,"value":313},{"type":20,"tag":34,"props":593,"children":594},{"id":150},[595],{"type":26,"value":150},{"type":20,"tag":154,"props":597,"children":598},{},[599,606],{"type":20,"tag":158,"props":600,"children":601},{},[602],{"type":20,"tag":162,"props":603,"children":604},{"href":172},[605],{"type":26,"value":172},{"type":20,"tag":158,"props":607,"children":608},{},[609],{"type":20,"tag":162,"props":610,"children":611},{"href":333},[612],{"type":26,"value":333},{"type":20,"tag":34,"props":614,"children":615},{"id":177},[616],{"type":26,"value":177},{"type":20,"tag":28,"props":618,"children":619},{},[620],{"type":26,"value":621},"JSON 是 i18n 资源文件常用格式，按语言分文件，键值映射文案。 JSONDog 提供全套 JSON 在线工具，纯前端、零上传、中英双语，欢迎免费使用。",{"type":20,"tag":186,"props":623,"children":624},{},[625],{"type":26,"value":190},{"title":7,"searchDepth":192,"depth":192,"links":627},[628,629,630,631,632],{"id":520,"depth":192,"text":520},{"id":530,"depth":192,"text":530},{"id":62,"depth":192,"text":62},{"id":150,"depth":192,"text":150},{"id":177,"depth":192,"text":177},"content:blog:json-i18n.md","blog/json-i18n.md","blog/json-i18n",{"_path":637,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":638,"description":639,"date":10,"category":11,"keywords":640,"body":644,"_type":199,"_id":799,"_source":201,"_file":800,"_stem":801,"_extension":204},"/blog/json-in-api","JSON 在 API 中的应用","RESTful 与 GraphQL API 普遍用 JSON 作为请求响应格式，本文介绍最佳实践。",[641,642,643],"json api","restful json","api响应",{"type":17,"children":645,"toc":792},[646,651,656,661,666,671,676,680,758,762,779,783,788],{"type":20,"tag":21,"props":647,"children":649},{"id":648},"json-在-api-中的应用",[650],{"type":26,"value":638},{"type":20,"tag":28,"props":652,"children":653},{},[654],{"type":26,"value":655},"JSON 是当今 Web API 事实标准格式，RESTful 与 GraphQL 均广泛采用。",{"type":20,"tag":34,"props":657,"children":659},{"id":658},"响应设计",[660],{"type":26,"value":658},{"type":20,"tag":28,"props":662,"children":663},{},[664],{"type":26,"value":665},"统一状态码与错误结构、合理分页、字段命名一致、避免过深嵌套。",{"type":20,"tag":34,"props":667,"children":669},{"id":668},"最佳实践",[670],{"type":26,"value":668},{"type":20,"tag":28,"props":672,"children":673},{},[674],{"type":26,"value":675},"用 HTTPS、压缩响应、版本化、文档化字段含义。",{"type":20,"tag":34,"props":677,"children":678},{"id":62},[679],{"type":26,"value":62},{"type":20,"tag":66,"props":681,"children":683},{"className":68,"code":682,"language":70,"meta":7,"style":7},"{\"code\": 0, \"data\": {\"id\": 1}, \"message\": \"ok\"}\n",[684],{"type":20,"tag":73,"props":685,"children":686},{"__ignoreMap":7},[687],{"type":20,"tag":45,"props":688,"children":689},{"class":78,"line":79},[690,694,699,703,708,712,717,721,726,730,735,740,745,749,754],{"type":20,"tag":45,"props":691,"children":692},{"style":83},[693],{"type":26,"value":86},{"type":20,"tag":45,"props":695,"children":696},{"style":89},[697],{"type":26,"value":698},"\"code\"",{"type":20,"tag":45,"props":700,"children":701},{"style":83},[702],{"type":26,"value":107},{"type":20,"tag":45,"props":704,"children":705},{"style":89},[706],{"type":26,"value":707},"0",{"type":20,"tag":45,"props":709,"children":710},{"style":83},[711],{"type":26,"value":118},{"type":20,"tag":45,"props":713,"children":714},{"style":89},[715],{"type":26,"value":716},"\"data\"",{"type":20,"tag":45,"props":718,"children":719},{"style":83},[720],{"type":26,"value":97},{"type":20,"tag":45,"props":722,"children":723},{"style":89},[724],{"type":26,"value":725},"\"id\"",{"type":20,"tag":45,"props":727,"children":728},{"style":83},[729],{"type":26,"value":107},{"type":20,"tag":45,"props":731,"children":732},{"style":89},[733],{"type":26,"value":734},"1",{"type":20,"tag":45,"props":736,"children":737},{"style":83},[738],{"type":26,"value":739},"}, ",{"type":20,"tag":45,"props":741,"children":742},{"style":89},[743],{"type":26,"value":744},"\"message\"",{"type":20,"tag":45,"props":746,"children":747},{"style":83},[748],{"type":26,"value":107},{"type":20,"tag":45,"props":750,"children":751},{"style":110},[752],{"type":26,"value":753},"\"ok\"",{"type":20,"tag":45,"props":755,"children":756},{"style":83},[757],{"type":26,"value":313},{"type":20,"tag":34,"props":759,"children":760},{"id":150},[761],{"type":26,"value":150},{"type":20,"tag":154,"props":763,"children":764},{},[765,772],{"type":20,"tag":158,"props":766,"children":767},{},[768],{"type":20,"tag":162,"props":769,"children":770},{"href":172},[771],{"type":26,"value":172},{"type":20,"tag":158,"props":773,"children":774},{},[775],{"type":20,"tag":162,"props":776,"children":777},{"href":333},[778],{"type":26,"value":333},{"type":20,"tag":34,"props":780,"children":781},{"id":177},[782],{"type":26,"value":177},{"type":20,"tag":28,"props":784,"children":785},{},[786],{"type":26,"value":787},"RESTful 与 GraphQL API 普遍用 JSON 作为请求响应格式，本文介绍最佳实践。 JSONDog 提供全套 JSON 在线工具，纯前端、零上传、中英双语，欢迎免费使用。",{"type":20,"tag":186,"props":789,"children":790},{},[791],{"type":26,"value":190},{"title":7,"searchDepth":192,"depth":192,"links":793},[794,795,796,797,798],{"id":658,"depth":192,"text":658},{"id":668,"depth":192,"text":668},{"id":62,"depth":192,"text":62},{"id":150,"depth":192,"text":150},{"id":177,"depth":192,"text":177},"content:blog:json-in-api.md","blog/json-in-api.md","blog/json-in-api",1787305466701]