舉例詳解HTML5中使用JSON格式提交表單

2020-03-24 16:30:44

字體：大中小

供稿：網(wǎng)友

以JSON編碼格式提交表單數(shù)據(jù)是HTML5對WEB發(fā)展進(jìn)化的又一大貢獻(xiàn)，以前我們的HTML表單數(shù)據(jù)是通過key-html' target='_blank'>value方式傳輸?shù)?a href='http://m.survivalescaperooms.com/tag/fuwuqi_6823_1.html' target='_blank'>服務(wù)器端，這種形式的傳輸對數(shù)據(jù)組織缺乏管理，形式十分原始。而新出現(xiàn)的JSON格式提交表單數(shù)據(jù)方法，將表單里的所有數(shù)據(jù)轉(zhuǎn)化的具有一定規(guī)范的JSON格式，然后傳輸?shù)姆?wù)器端。服務(wù)器端接收到的數(shù)據(jù)是直接可以使用的合格JSON代碼。如何聲明以JSON格式提交表單大家應(yīng)該對如何用表單上傳一個(gè)文件的寫法很熟悉，它需要在HTML中form標(biāo)記上添加 enctype= multipart/form-data 聲明，就是告訴瀏覽器要按上傳文件模式發(fā)送表單數(shù)據(jù)。而JSON格式提交表單的聲明與此類似，它的寫法是： enctype='application/json'。
對老式瀏覽器的兼容以JSON格式提交表單是HTML5中一種很新的規(guī)范，只有實(shí)現(xiàn)了這些規(guī)范的現(xiàn)代瀏覽器才能識別 enctype='application/json'的語義，才能正確的將表單數(shù)據(jù)打包成JSON格式。而對于一些老式瀏覽器，以及還未實(shí)現(xiàn)這些標(biāo)準(zhǔn)的瀏覽器，它們無法識別 enctype='application/json'代表什么，于是表單的enctype會自動退化成application/x-www-form-urlencoded缺省編碼格式。服務(wù)器端代碼可以根據(jù)enctype的值來判斷如何接收數(shù)據(jù)。
JSON編碼格式提交表單的格式范例
例1 基本用法XML/HTML Code復(fù)制內(nèi)容到剪貼板
formenctype='application/json' inputname='name'value='Bender' selectname='hind' optionselected Bitable /option option Kickable /option /select inputtype='checkbox'name='shiny'checked /form //生成的Json數(shù)據(jù)是 { name : Bender , hind : Bitable , shiny :true }
formenctype='application/json' inputtype='number'name='bottle-on-wall'value='1' inputtype='number'name='bottle-on-wall'value='2' inputtype='number'name='bottle-on-wall'value='3' /form //生成的Json數(shù)據(jù)是 { bottle-on-wall :[1,2,3] }
formenctype='application/json' inputname='pet[species]'value='Dahut' inputname='pet[name]'value='Hypatia' inputname='kids[1]'value='Thelma' inputname='kids[0]'value='Ashley' /form //生成的Json數(shù)據(jù)是 { pet :{ species : Dahut , name : Hypatia } , kids :[ Ashley , Thelma ] }
formenctype='application/json' inputname='hearbeat[0]'value='thunk' inputname='hearbeat[2]'value='thunk' /form //生成的Json數(shù)據(jù)是 { hearbeat :[ thunk ,null, thunk ] }
formenctype='application/json' inputname='pet[0][species]'value='Dahut' inputname='pet[0][name]'value='Hypatia' inputname='pet[1][species]'value='FelisStultus' inputname='pet[1][name]'value='Billie' /form //生成的Json數(shù)據(jù)是 { pet :[ { species : Dahut , name : Hypatia } ,{ species : FelisStultus , name : Billie } ] }
formenctype='application/json' inputname='wow[such][deep][3][much][power][!]'value='Amaze' /form //生成的Json數(shù)據(jù)是 { wow :{ such :{ deep :[ null ,null ,null ,{ much :{ power :{ ! : Amaze } } } ] } } }
formenctype='application/json' inputtype='file'name='file'multiple /form //假設(shè)你上傳了2個(gè)文件,生成的Json數(shù)據(jù)是: { file :[ { type : text/plain , name : dahut.txt , body : REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo= }, { type : text/plain , name : litany.txt , body : SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg== } ] }html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：如何在HTML中使用JavaScript

下一篇：angularjs是什么？為什么用angularjs？