您現在的位置是:電腦技術吧?>? 故障問題 ??>??表單提交,已提交表單??>??正文詳情

表單提交,已提交表單

鄺元愷2019-11-27 09:42:03 人圍觀
簡介html提交表單以JSON編碼格式提交表單數據是HTML5對web發展和演進的又一重大貢獻。以前,我們的HTML表單數據是通過服務器端的鍵值模式傳輸的,缺乏數據組織管理,非常原網頁表單提交

以JSON編碼格式提交表單數據是HTML5對WEB發展進化的又一大貢獻,以前我們的HTML表單數據是通過key-value方式傳輸的服務器端,這種形式的傳輸對數據組織缺乏管理,形式十分原始。

而新出現的JSON格式提交表單數據方法,將表單里的所有數據轉化的具有一定規范的JSON格式,然后傳輸的服務器端。

服務器端接收到的數據是直接可以使用的合格JSON代碼。

如何聲明以JSON格式提交表單  大家應該對如何用表單上傳一個文件的寫法很熟悉,它需要在HTML中form標記上添加 enctype=multipart/form-data 聲明,就是告訴瀏覽器要按上傳文件模式發送表單數據。

而JSON格式提交表單的聲明與此類似,它的寫法是: enctype='application/json'。

  對老式瀏覽器的兼容  以JSON格式提交表單是HTML5中一種很新的規范,只有實現了這些規范的現代瀏覽器才能識別 enctype='application/json'的語義,才能正確的將表單數據打包成JSON格式。

而對于一些老式瀏覽器,以及還未實現這些標準的瀏覽器,它們無法識別 enctype='application/json'代表什么,于是表單的enctype會自動退化成application/x-www-form-urlencoded缺省編碼格式。

服務器端代碼可以根據enctype的值來判斷如何接收數據。

  JSON編碼格式提交表單的格式范例  例1 基本用法XML/HTML Code復制內容到剪貼板

    form enctype='application/json' input name='name' value='Bender' select name='hind' option selectedBitable/option optionKickable/option /select input type='checkbox' name='shiny' checked /form // 生成的Json數據是 { name: Bender , hind: Bitable , shiny: true }
例2 當表單存在多個重名的表單域時,按JSON數組編碼XML/HTML Code復制內容到剪貼板
    form enctype='application/json' input type='number' name='bottle-on-wall' value='1' input type='number' name='bottle-on-wall' value='2' input type='number' name='bottle-on-wall' value='3' /form // 生成的Json數據是 { bottle-on-wall: [1, 2, 3] }
例3 表單域名稱以數組形成出現的復雜結構XML/HTML Code復制內容到剪貼板
    form enctype='application/json' input name='pet[species]' value='Dahut' input name='pet[name]' value='Hypatia' input name='kids[1]' value='Thelma' input name='kids[0]' value='Ashley' /form // 生成的Json數據是 { pet: { species: Dahut , name: Hypatia } , kids: [Ashley, Thelma] }
例4 在上面的例子中,缺失的數組序號值將以null替代XML/HTML Code復制內容到剪貼板
    form enctype='application/json' input name='hearbeat[0]' value='thunk' input name='hearbeat[2]' value='thunk' /form // 生成的Json數據是 { hearbeat: [thunk, null, thunk] }
例5 多重數組嵌套格式,嵌套層數無限制XML/HTML Code復制內容到剪貼板
    form enctype='application/json' input name='pet[0][species]' value='Dahut' input name='pet[0][name]' value='Hypatia' input name='pet[1][species]' value='Felis Stultus' input name='pet[1][name]' value='Billie' /form // 生成的Json數據是 { pet: [ { species: Dahut , name: Hypatia } , { species: Felis Stultus , name: Billie } ] }
例6 真的,沒有數組維度限制!XML/HTML Code復制內容到剪貼板
    form enctype='application/json' input name='wow[such][deep][3][much][power][!]' value='Amaze' /form // 生成的Json數據是 { wow: { such: { deep: [ null , null , null , { much: { power: { !: Amaze } } } ] } } }
例7 文件上傳XML/HTML Code復制內容到剪貼板
    form enctype='application/json' input type='file' name='file' multiple /form // 假設你上傳了2個文件, 生成的Json數據是: { file: [ { type: text/plain, name: dahut.txt, body: REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo= }, { type: text/plain, name: litany.txt, body: SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg== } ] }

版權聲明:本文由 鄺元愷 整理編輯。

原標題:表單的提交方式有哪些,表單提交的方式

轉載注明出處:http://www.dn9ww09s.icu/fault/14543.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦開機要選擇系統,win7系統如何去除桌面水印

    電腦開機要選擇系統,win7系統如何去除桌面水印 相關圖片電腦開機兩個系統選擇win系統下設置了6個文件夾,包括視頻、圖片、文檔、下載、音樂和桌面。但是由于有六個文件夾,整個資源管理器頁面變得更加復雜。有沒有辦法把這臺電腦下面...

  • 茨林面板,面板

    茨林面板,面板 相關圖片顯示面板快捷鍵可以提高我們平時的工作效率。今天,我將介紹Dreamweaver文件面板的快捷鍵。vcm面板...

  • 哈羅單車開鎖,哈羅單車怎么開鎖

    哈羅單車開鎖,哈羅單車怎么開鎖 相關圖片哈羅單車開鎖破解近日,不少朋友向小編反映,小明自行車的車鎖經常打不開。那么如何應對安卓版小明自行車無法解鎖的情況。今天,超人小編為大家帶來了小明自行車解鎖失敗的解...

  • css有多少選擇符,css的選擇符

    css有多少選擇符,css的選擇符 相關圖片css三種基本選擇符原來的名字可以這么一段時間以前,我在一個網站上看到這樣的內容:這個也可以嗎?這是我的第一印象。不過,經過一番調查,我們知道這確實有效。另外,“U”的...

  • win7桌面圖標異常,win7不顯示桌面圖標

    win7桌面圖標異常,win7不顯示桌面圖標 相關圖片win7桌面圖標怎么變小超人編輯今天想談談win7的一些基礎課程。本課程介紹Windows 7桌面圖標的顯示方法。主要針對Windows7家庭普通版和高級版用戶。沒有個性化配置條目,因win7桌面不顯示...

  • 無障礙專車,滴滴無障礙專車

    無障礙專車,滴滴無障礙專車 相關圖片滴滴關愛出行無障礙車近年來,為有特殊需要的旅客提供專屬服務越來越受到重視。未來,滴滴的安卓版已經宣布,它將能夠使用無障礙汽車為特殊人群。讓我們看看滴滴無障礙車的預...

  • 百分比,百分比怎么求

    百分比,百分比怎么求 相關圖片計算百分比許多CSS屬性的值可以是百分比值。雖然從形式上講,百分比值的形式是數字后跟%值(注意數字和%值之間不能有空格),但其含義在不同的情況下會有所不同。因此,百分率可...

  • 余額寶有上限嗎,余額寶

    余額寶有上限嗎,余額寶 相關圖片余額寶即將取消余波的投資方法非常簡單,即使是新手理財也能輕松操作。但近日支付寶安卓版余額寶宣布調整個人投資上限。今天,小編為大家帶來了一款個人投資上限的支付寶余額...

  • 鼠標滾輪放大縮小功能,鼠標滾輪放大縮小

    鼠標滾輪放大縮小功能,鼠標滾輪放大縮小 相關圖片cad鼠標滾輪放大縮小設置您和我都知道,將鼠標滾輪事件添加到HTML5網頁可以更好地讓用戶與網頁交互。在HTML5中,鼠標滾輪不僅可以上下滑動網頁,其實你還可以依靠這個來完成更多的...

  • 兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務

    兼職貓發一次招聘多少錢,兼職貓怎么發布手機任務 相關圖片兼職貓個人認證可以發什么如今,越來越多的大學生會利用業余時間做兼職,不僅鍛煉身體,還能掙零花錢。所以作為一個企業,你想通過它找到可靠的大學生。那么,兼職貓如何才能...

熱評文章

  • 白條閃付入口沒了,白條閃付的開通條件

    白條閃付入口沒了,白條閃付的開通條件 相關圖片京東白條閃付微信支付看到身邊的小伙伴們打開京東白條,生活變得更加方便。你還想開京東白條付款嗎?如果你想打開京東白條的flash支付,但是你不知道打開的入口在哪里,你可以看...

  • 支付寶中的理財安全嗎,支付寶什么理財最安全

    支付寶中的理財安全嗎,支付寶什么理財最安全 相關圖片支付寶月度理財安全嗎樂邁寶是一款宣傳用戶可以邊消費邊賺錢的軟件。聽起來不可思議,因為這意味著我們買得越多,賺得越多。這顯然是促進消費的一種手段。所以很多人擔心它是...

  • 選擇符有哪些,選擇符

    選擇符有哪些,選擇符 相關圖片p是什么選擇符當我第一次開始編寫CSS時,我對代碼的高度自由感到困惑。也就是說,如果同一個設計是由不同的人實現的,那么最終的代碼必須是不同的。但有個問題。如果不同的人通...

  • 如何將pdf轉換為doc,如何將doc轉換成pdf

    如何將pdf轉換為doc,如何將doc轉換成pdf 相關圖片如何將pdf格式轉換成wordDoc是一種常見的word文檔格式。雖然DOC文檔比較常見,但有時為了方便閱讀DOC文檔,我們會將DOC轉換成PDF文件。所以今天的超人編輯在這里分享如何將do如何將wor...

  • 頁面頁眉與頁面頁腳只出現在,頁面頁腳設置在哪里

    頁面頁眉與頁面頁腳只出現在,頁面頁腳設置在哪里 相關圖片頁眉和頁腳頁腳的位置是頁面的頁腳,通常用于放置幫助鏈接和版權信息。頁腳應該自然位于頁面的底部,但根據一般慣例,如果頁腳之前的頁面內容相對較小,或者使用垂直分辨率較...

  • 文件轉換格式,文件是pdf格式怎么轉換

    文件轉換格式,文件是pdf格式怎么轉換 相關圖片zip格式怎么轉換pdfPdf文件在office中非常實用,但由于不易隨意編輯,很多人不習慣直接編寫Pdf文件。此時,我們可以編輯文檔,然后將其轉換為PDF格式。借助于快速的PDF轉換pdf怎么轉換...

  • 電池狀態,電池狀態顯示維修

    電池狀態,電池狀態顯示維修 相關圖片蘋果電池顯示維修解決移動設備在網絡流量中的份額越來越大,其貢獻的網絡流量也越來越大,我們已經分別為移動設備創建了一些api和設計概念。一個非常典型的例子是W3C電池狀態A...

  • 內涵段子,內涵段子里發的網站

    內涵段子,內涵段子里發的網站 相關圖片發段子內涵段是一種流行的段共享應用。在這個軟件中,用戶可以閱讀各種有趣的故事。那么如何為內容段發送視頻呢?接下來,超人軟件編輯將介紹內容段iPhone視頻的上傳端適合發朋...

  • 折扇教程,折扇制作教程

    折扇教程,折扇制作教程 相關圖片折扇效果圖:第一步:畫原型第二步:畫原型第三步:補充第四步:修改第五步:拿扇形圈第六步:導入材料圖片美化第七步:文字裝飾材料圖片折扇怎么拿...

  • word怎么打不開了怎么辦,所有word文檔都打不開

    word怎么打不開了怎么辦,所有word文檔都打不開 相關圖片word注冊表數據庫損壞Word是我們日常生活中經常使用的辦公應用軟件之一。但是,如果文字不能打開,就會更加混亂,影響工作效率。如果遇到word無法打開并發送錯誤報告的情況,您知...

關注微信

变脸官网查询