JSON編碼格式提交表單資料詳解
以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 基本用法
<form enctype='application/json'> <input name='name' value='Bender'> <select name='hind'> <option selected>Bitable</option> <option>Kickable</option> </select> <input type='checkbox' name='shiny' checked> </form> // 生成的Json資料是 { "name": "Bender" , "hind": "Bitable" , "shiny": true }
例2 當表單存在多個重名的表單域時,按JSON陣列編碼
<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 表單域名稱以陣列形成出現的複雜結構
<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替代
<form enctype='application/json'> <input name='hearbeat[0]' value='thunk'> <input name='hearbeat[2]' value='thunk'> </form> // 生成的Json資料是 { "hearbeat": ["thunk", null, "thunk"] }
例5 多重陣列巢狀格式,巢狀層數無限制
<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 真的,沒有陣列維度限制!
<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 檔案上傳
<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==" } ] }
相關文章
- 向Solr資料集提交Json格式資料(Scala,Post)SolrJSON
- Ajax 提交表單資料
- 如果將json格式資料繫結與表單元素上JSON
- 探索多種資料格式:JSON、YAML、XML、CSV等資料格式詳解與比較JSONYAMLXML
- Laravel 8 表單驗證丟擲異常返回 json 格式資料LaravelJSON
- JSON 資料格式JSON
- 資料庫表的基本操作和編碼格式設定資料庫
- IP資料包格式詳解
- 蝦皮商品詳情介面返回資料的json格式JSON
- jQuery遍歷讀取json格式資料簡單程式碼例項jQueryJSON
- Protocol Buffer技術詳解(資料編碼)Protocol
- 關於重寫 Laravel 表單驗證器 Request 返回 JSON 的資料格式LaravelJSON
- jQuery解析json格式資料生成級聯選單jQueryJSON
- Android中JSON資料格式的簡單使用AndroidJSON
- 將表單元素轉換為json格式物件例項程式碼JSON物件
- JSON簡單格式程式碼例項JSON
- 利用js編寫一個簡單的html表單驗證,驗證通過時提交資料(附原始碼)JSHTML原始碼
- js解析php格式的表單到json物件PHPJSON物件
- **PHP分步表單提交思路(分頁表單提交)PHP
- JSON資料格式的使用JSON
- php操作JSON格式資料PHPJSON
- spring mvc 表單提交 亂碼SpringMVC
- jQuery處理json格式資料程式碼例項jQueryJSON
- 關於ajax提交表單,重複提交解決方法
- Go JSON編碼與解碼?GoJSON
- PHP 表單提交後臺資料驗證 ValidatorPHP
- php表單提交PHP
- javascript提交表單JavaScript
- php json提交亂碼的解決辦法PHPJSON
- jQuery通過ajax返回json格式資料簡單介紹jQueryJSON
- 資料型別和Json格式資料型別JSON
- Delphi處理JSON格式資料JSON
- 防止表單重複提交的程式碼
- jQuery對JSON格式資料的解析例項程式碼jQueryJSON
- $.each()方法遍歷json格式資料程式碼例項JSON
- jQuery遍歷json格式資料完整程式碼例項jQueryJSON
- 原生ajax處理json格式資料程式碼例項JSON
- 模板表單資料提交於後臺的接受機制