舉例詳解HTML5中使用JSON格式提交表單_html5教學技巧

以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複製內容到剪貼簿

1. form enctype=enctype=enctype>
  
2.   input name name name= 🎜> value
3. ='Bender'> >   select name 
name
4. >       option selected> selected>
5. >option>       option>Kickable
6. >Kickable>     
7. select>     input type type name=
8. 'shiny' checked >
9. form>
10.   
11.     
12. // 產生的Json資料是   
13. {   
14.   "name":   "Bender"   
15. , "hind":   "Bitable"   

, "shiny":  true   

}  

例2 當表單存在多個重名的表單域時，依JSON陣列編碼    

XML/HTML Code複製內容到剪貼簿

1. 表單 enctype=enctype=>
  
2.       輸入 類型 類型 類型 名稱='牆上的瓶子' 值 
3. '1'>         輸入 類型 類型 類型 名稱='牆上的瓶子' 
值
4.  '2'>         輸入 類型 類型 類型 名稱=
'牆上的瓶子'
5.  值 '3'>
6.   
7.     
8. 表格>
9.   
        

    // 產生的Json資料是   

    {   

      「牆上的瓶子」：   [1, 2, 3]   

    }   範例3表單域名稱以陣列形成出現的複雜結構 XML/HTML 程式碼將內容複製到剪貼簿

1. 表單 enctype=enctype=>
  
2.   輸入 姓名=姓名==> ]' 值=
3. 'Dahut'>   輸入 姓名=姓名==姓名]' 值
4. ='Hypatia'>> 🎜>   輸入 姓名=姓名=
1]'
5.  值='塞爾瑪'>>   輸入 姓名
6. =姓名= 0]' 值
=
7. '阿希姆'
>
8. '阿希>阿希>
10. 表格>
11.   
12.     
13. // 產生的Json資料是   
14. {   
15.     「寵物」：  ​​{   

        「物種」：  「達胡特」   

    ,   「姓名」:     「希帕夏」   

    }    ，   「孩子們」：   [「艾希莉」，「瑟瑪」]   

}   例4在上面的例子中，恢復的備份序號值將null取代     XML/HTML 程式碼將內容複製到剪貼簿

1. 表單 enctype=enctype=>
  
2.       輸入  值='thunk'>        
3. 輸入 - - -
 值='thunk'>      
4. 表格>          
5.     // 產生的Json資料是   
6.     {   
7.         "hearbeat":   ["thunk", null, "thunk"]   
8.     }  

例5 瀑布池塘格式，瀑布層數無限制

   

XML/HTML 程式碼

將內容複製到剪貼簿

1. 表單 enctype=enctype=>
  
2.       輸入 名稱 名稱 值='Dahut'>
3.       輸入 名稱 名稱 值='Hypatia'>
4.       輸入 名稱 名稱 名稱 值=
'Felis Stultus'
5. >'Felis Stultus'>'Felis St >       輸入 名稱 名稱 名稱 
6. 值='比莉'>'比莉'>
    
表格
9. >
  
11.         
12.     // 產生的Json資料是   
13.     {   
14.         「寵物」：  ​​[   
15.             {   
16.                 "物種":  "達胡特"   
17.             ,   「姓名」:     「希帕夏中」  
18.             }   
19.         ,   {   
20.                 "物種":  "貓科動物"   

            ,   「被稱者」:     「比莉」   

            }   

        ]        }  

例6真的，沒有備份備份限制！     XML/HTML 程式碼將內容複製到剪貼簿

1. form enctype=enctype=enctype>
  
2.       input name > > > 
3. value='Amaze'>  
4.     
5. form>
6.   
        
7.     // 產生的Json資料是   
8.     {   
9.         "wow":  {   
10.             "such": {   
11.                 "deep": [   
12.                     null   
13.                 ,   null   
14.                 ,   null   
15.                 ,   {   
16.                         "much": {   
17.                             "power": 
                                
18.                             }   
                        }   
                    }   
                ]   
            }   

        }   

    }  

例7 文件上傳     XML/HTML Code複製內容到剪貼簿

1. form enctype=enctype=enctype>
  
2.      input type type  name='file'
 multiple
3.  multiple >    
4. form>
5.   
6.        
7.    // 假設你上傳了2個檔案, 產生的Json資料是:   
8.    {   
9.        "file": [   
10.            {   
11.                "type": "text/plain",                   "name": "dahut.txt",   
12.                "body": "
REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo           },   
13.            {   
14.                "type": "text/plain",   
15.                "name": "litany.txt",                                "body": "
SSBtdXN0IG5vdCBmZWFyLlxuRmV🎜>SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aLmLpram            }   
       ]   
   }