Detailed example of using JSON format to submit forms in HTML5_html5 tutorial skills

Submitting form data in JSON encoding format is another major contribution of HTML5 to the development and evolution of WEB. In the past, our HTML form data was transmitted on the server side through key-value method. This form of transmission lacked management of data organization. The form is very primitive. The newly emerged method of submitting form data in JSON format converts all data in the form into a JSON format with certain specifications, and then transmits it to the server. The data received by the server is qualified JSON code that can be used directly. How to declare form submission in JSON format

Everyone should be familiar with how to use a form to upload a file. It requires adding the enctype="multipart/form-data" statement to the form tag in HTML, which tells the browser to send the form data in file upload mode. The declaration of the JSON format submission form is similar to this. It is written as: enctype='application/json'.
Compatibility with older browsers

Submitting forms in JSON format is a very new specification in HTML5. Only modern browsers that implement these specifications can recognize the semantics of enctype='application/json' and correctly package form data into JSON format. For some old browsers, as well as browsers that have not yet implemented these standards, they cannot recognize what enctype='application/json' represents, so the form's enctype will automatically degrade to the application/x-www-form-urlencoded default encoding. Format. Server-side code can determine how to receive data based on the value of enctype.
Format example of JSON encoding format submission form
Example 1 Basic usage

XML/HTML CodeCopy content to clipboard

1. <form enctype='application/json'> 
2. <input name='name' value='Bender'>
3. <select name='hind' >
4.  <option selected>Bitable< ;/option> 
5.  <option>Kickableoption>
6. select>
7. <input type='checkbox' name='shiny' checked>
8. form>
10. //The generated Json data is
11. {
12. "name": "Bender"
13. , "hind": "Bitable"
14. , "shiny": true
15. }

Example 2 When there are multiple form fields with the same name in the form, encode them as JSON arrays

XML/HTML CodeCopy content to clipboard

1. <form enctype='application/json'>  
2.       <input type='number' name='bottle-on-wall' value='1'>  
3.       <input type='number' name='bottle-on-wall' value='2'>  
4.       <input type='number' name='bottle-on-wall' value='3'>  
5.     form>  
6.         
7.     // 生成的Json数据是   
8.     {   
9.       "bottle-on-wall":   [1, 2, 3]   
10.     }  

例3 表单域名称以数组形成出现的复杂结构

XML/HTML Code复制内容到剪贴板

1. <form enctype='application/json'>  
2.   <input name='pet[species]' value='Dahut'>  
3.   <input name='pet[name]' value='Hypatia'>  
4.   <input name='kids[1]' value='Thelma'>  
5.   <input name='kids[0]' value='Ashley'>  
6. form>  
7.     
8. // 生成的Json数据是   
9. {   
10.     "pet":  {   
11.         "species":  "Dahut"   
12.     ,   "name":     "Hypatia"   
13.     }   
14. ,   "kids":   ["Ashley", "Thelma"]   
15. }  

例4 在上面的例子中，缺失的数组序号值将以null替代

   

XML/HTML Code复制内容到剪贴板

1. <form enctype='application/json'>  
2.       <input name='hearbeat[0]' value='thunk'>  
3.       <input name='hearbeat[2]' value='thunk'>  
4.     form>  
5.         
6.     // 生成的Json数据是   
7.     {   
8.         "hearbeat":   ["thunk", null, "thunk"]   
9.     }  

例5 多重数组嵌套格式，嵌套层数无限制

   

XML/HTML Code复制内容到剪贴板

1. <form enctype='application/json'>  
2.       <input name='pet[0][species]' value='Dahut'>  
3.       <input name='pet[0][name]' value='Hypatia'>  
4.       <input name='pet[1][species]' value='Felis Stultus'>  
5.       <input name='pet[1][name]' value='Billie'>  
6.     form>  
7.         
8.     // 生成的Json数据是   
9.     {   
10.         "pet":  [   
11.             {   
12.                 "species":  "Dahut"   
13.             ,   "name":     "Hypatia"   
14.             }   
15.         ,   {   
16.                 "species":  "Felis Stultus"   
17.             ,   "name":     "Billie"   
18.             }   
19.         ]   
20.     }  

例6 真的，没有数组维度限制！

   

XML/HTML Code复制内容到剪贴板

1. <form enctype='application/json'> 
2.  <input name='wow[ such][deep][3][much][power][!]' value='Amaze' >
3.  form> 
4.  
5. // The generated Json data is
6. {
7. "wow": {
8. "such": {
9. "deep": [
10.                                                                                                                                                   
, null
, null
, , {
“much”: {
"power": {
“!”: “Amaze”
                                                                           
17.                                                                     
                                                                      
18.                                                         
                                                                
19.                                                               
}
21. Example 7 File upload
XML/HTML Code
23. Copy content to clipboard
1. <form enctype='application/json'> 
2.  <input type='file' name='file' multiple>
3. form>
4.  
5. // Suppose you upload 2 files, the generated Json data is:
6. {
7. "file": [
8.                                                    
"type": "text/plain",
"name": "dahut.txt",
"body": "
11. REFBQUFBQUFIVVVVVVVVVVVVCEhIQo="
},
                                                   
13. "type": "text/plain",
14. "name": "litany.txt",
15. "Body": " SSBTDXN0IG5VDCBMZWFYLLLXVHCIBPCIBPCIB0AGUGBWLUZC1RWXSZIUCG
16. =="                                                            
]
}