Contoh terperinci menggunakan format JSON untuk menyerahkan borang dalam kemahiran tutorial HTML5_html5

Menyerahkan data borang dalam format pengekodan JSON ialah satu lagi sumbangan utama HTML5 kepada pembangunan dan evolusi WEB Pada masa lalu, data borang HTML kami telah dihantar pada bahagian pelayan melalui kaedah nilai kunci ini organisasi data. Bentuknya sangat primitif. Kaedah yang baru muncul untuk menyerahkan data borang dalam format JSON menukar semua data dalam borang kepada format JSON dengan spesifikasi tertentu, dan kemudian menghantarnya ke pelayan. Data yang diterima oleh pelayan adalah kod JSON yang layak yang boleh digunakan secara langsung. Cara mengisytiharkan penyerahan borang dalam format JSON

Semua orang harus biasa dengan cara menggunakan borang untuk memuat naik fail. Ia memerlukan penambahan pernyataan enctype="multipart/form-data" pada teg borang dalam HTML, yang memberitahu penyemak imbas untuk menghantar data borang dalam fail. mod muat naik. Pengisytiharan borang penyerahan format JSON adalah serupa dengan ini. Ia ditulis sebagai: enctype='application/json'.
Keserasian dengan penyemak imbas lama

Menyerahkan borang dalam format JSON ialah spesifikasi yang sangat baharu dalam HTML5 Hanya penyemak imbas moden yang melaksanakan spesifikasi ini boleh mengecam semantik enctype='application/json' dan membungkus data borang dengan betul ke dalam format JSON. Untuk sesetengah penyemak imbas lama, serta penyemak imbas yang belum lagi melaksanakan piawaian ini, mereka tidak dapat mengenali apa yang diwakili oleh enctype='application/json', jadi enctype borang akan secara automatik menurun kepada pengekodan lalai application/x-www-form-urlencoded . Kod sebelah pelayan boleh menentukan cara menerima data berdasarkan nilai enctype.
Format contoh borang penyerahan format pengekodan JSON
Contoh 1 Penggunaan asas

Kod XML/HTMLSalin kandungan ke papan keratan

1. <borang enctype='application/json'> 
2. <masukan nama='nama' nilai='Bender'>
3. <pilih nama='belakang' >
4.  <pilihan dipilih>Bable< ;/pilihan> 
5.  <pilihan>Boleh ditendangpilihan>
6. pilih>
7. <input taip='kotak semak' nama='berkilat' ditandai>
8. borang>
10. //Data Json yang dijana ialah
11. {
12. "nama": "Bender"
13. , "belakang": "Boleh digigit"
14. , "berkilat": benar
15. }

Contoh 2 Apabila terdapat berbilang medan borang dengan nama yang sama dalam borang, kodkannya sebagai tatasusunan JSON

Kod XML/HTMLSalin kandungan ke papan keratan

1. <borang enctype='application/json'>  
2.       <input taip='nombor'  nama='botol di dinding' nilai='1'>  
3.       <input taip='nombor'  nama='botol di dinding' nilai='2'>  
4.       <input taip='nombor'  nama='botol di dinding' nilai='3'>  
5.     borang>  
6.         
7.     // 生成的Json数据是   
8.     {   
9.       "botol di dinding":   [1, 2, 3]   
10.     }  

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

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

1. <borang enctype='application/json'>  
2.   <input nama='haiwan peliharaan[ spesies]' nilai='Dahut'>  
3.   <input nama='haiwan peliharaan[ nama]' nilai='Hypatia'>  
4.   <input nama='kanak-kanak[ 1]' nilai='Thelma'>  
5.   <input nama='kanak-kanak[ 0]' nilai='Ashley'>  
6. borang>  
7.     
8. // 生成的Json数据是   
9. {   
10.     "haiwan peliharaan":  {   
11.         "spesies":  "Dahut"   
12.     ,   "nama":     "Hypatia"   
13.     }   
14. ,   "kanak-kanak":   ["Ashley", "Thelma"]   
15. }  

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

   

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

1. <borang enctype='application/json'>  
2.       <masukan nama=<🎜[>'dengar 0]' nilai='thunk'>  
3.       <masukan nama=<🎜[>'dengar 2]' nilai='thunk'>  
    
4. borang>  
        
    // 生成的Json数据是   
    {   
        "denyutan jantung":   ["detik", null, "detik"]   
    }  

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

   

Kod XML/HTML

复制内容到剪贴板

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

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

   

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

1. <borang enctype='application/json'> 
2.  <input nama='wow[ begitu][deep][3][banyak][kuasa][!]' nilai='Amaze' >
3.  borang> 
4.  
5. // Data Json yang dihasilkan ialah
6. {
7. "wah": {
8. "seperti": {
9. "dalam": [
10.                                                                                                                                                                                                               
, batal
, batal
, , {
“banyak”: {
"kuasa": {
“!”: “Memukau”
                                                                           
17.                                                                      
                                                                      
18.                                                         
                                                                
19.                                                               
}
21. Contoh 7 muat naik fail
Kod XML/HTML
23. Salin kandungan ke papan keratan
1. <form enctype='application/json'> 
2.  <Eingabe Typ='Datei' Name='Datei'mehrere>
3. Formular>
4.  
5. // Angenommen, Sie laden 2 Dateien hoch, die generierten Json-Daten lauten:
6. {
7. „Datei“: [
8.                                                   
„type“: „text/plain“,
„Name“: „dahut.txt“,
"body": "
11. REFBQUFBQUFIVVVVVVVVVVVVCEhIQo="
},
                                                  
13. „type“: „text/plain“,
14. „Name“: „litany.txt“,
15. „Body“: „ SSBTDXN0IG5VDCBMZWFYLLLXVHCIBPCIBPCIB0AGUGBWLUZC1RWXSZIUCG
16. =="                                                           
]
}