Detailliertes Beispiel für die Verwendung des JSON-Formats zum Senden von Formularen im HTML5_HTML5-Tutorial

Die Übermittlung von Formulardaten im JSON-Codierungsformat ist ein weiterer wichtiger Beitrag von HTML5 zur Entwicklung und Weiterentwicklung von WEB. In der Vergangenheit wurden unsere HTML-Formulardaten serverseitig über die Schlüsselwertmethode übertragen Die Form der Datenorganisation ist sehr primitiv. Die neu entstandene Methode zur Übermittlung von Formulardaten im JSON-Format konvertiert alle Daten im Formular in ein JSON-Format mit bestimmten Spezifikationen und übermittelt sie dann an den Server. Bei den vom Server empfangenen Daten handelt es sich um qualifizierten JSON-Code, der direkt verwendet werden kann. So deklarieren Sie die Formularübermittlung im JSON-Format

Jeder sollte damit vertraut sein, wie man ein Formular zum Hochladen einer Datei verwendet. Dazu muss dem Formular-Tag in HTML die Anweisung „enctype="multipart/form-data" hinzugefügt werden, die den Browser anweist, die Formulardaten in einer Datei zu senden Upload-Modus. Die Deklaration des JSON-Format-Übermittlungsformulars ist wie folgt geschrieben: enctype='application/json'.
Kompatibilität mit älteren Browsern

Das Senden von Formularen im JSON-Format ist eine sehr neue Spezifikation in HTML5. Nur moderne Browser, die diese Spezifikationen implementieren, können die Semantik von enctype='application/json' erkennen und Formulardaten korrekt in das JSON-Format verpacken. Einige alte Browser sowie Browser, die diese Standards noch nicht implementiert haben, können nicht erkennen, was enctype='application/json' darstellt, sodass der Enctype des Formulars automatisch auf die Standardcodierung application/x-www-form-urlencoded herabgestuft wird . Formatieren. Serverseitiger Code kann basierend auf dem Wert von enctype bestimmen, wie Daten empfangen werden.
Formatbeispiel für das Übermittlungsformular für das JSON-Codierungsformat
Beispiel 1 Grundlegende Verwendung

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <form enctype='application/json'> 
2. <Eingabe Name='Name' Wert='Bender'>
3. <wählen Name='hind' >
4.  <Option ausgewählt>Bitbar< ;/Option> 
5.  <Option>KickbarOption>
6. auswählen>
7. <Eingabe Typ='Kontrollkästchen' Name='shiny'geprüft>
8. Formular>
10. //Die generierten Json-Daten sind
11. {
12. „Name“: „Bender“
13. , „hind“: „Bitable“
14. , „glänzend“: wahr
15. }

Beispiel 2: Wenn das Formular mehrere Formularfelder mit demselben Namen enthält, codieren Sie diese als JSON-Arrays

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <form enctype='application/json'>  
2.       <Eingabe Typ='Nummer'  Name='Flasche an der Wand' Wert='1'>  
3.       <Eingabe Typ='Nummer'  Name='Flasche an der Wand' Wert='2'>  
4.       <Eingabe Typ='Nummer'  Name='Flasche an der Wand' Wert='3'>  
5.     Formular>  
6.         
7.     // 生成的Json数据是   
8.     {   
9.       „Flasche an der Wand“:   [1, 2, 3]   
10.     }  

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

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

1. <form enctype='application/json'>  
2.   <Eingabe Name='Haustier[ Art]' Wert='Dahut'>  
3.   <Eingabe Name='Haustier[ Name]' Wert='Hypatia'>  
4.   <Eingabe Name='Kinder[ 1]' Wert='Thelma'>  
5.   <Eingabe Name='Kinder[ 0]' Wert='Ashley'>  
6. Formular>  
7.     
8. // 生成的Json数据是   
9. {   
10.     "Haustier":  {   
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]' Wert='thunk'>  
3.       <input name='hearbeat[ 2]' Wert='thunk'>  
4.     Formular>  
5.         
6.     // 生成的Json数据是   
7.     {   
8.         "hearbeat":   ["thunk", null, "thunk"]   
9.     }  

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

   

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

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

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

   

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

1. <form enctype='application/json'> 
2.  <Eingabe Name='wow[ such][deep][3][much][power][!]' value='Amaze' >
3.  Formular> 
4.  
5. // Die generierten Json-Daten sind
6. {
7. „wow“: {
8. „so“: {
9. „tief“: [
10.                                                                                                                                      
, null
, null
, , {
„viel“: {
„Macht“: {
„!“: „Amaze“
                                                                         
17.                                                                    
                                                                    
18.                                                        
                                                              
19.                                                              
}
21. Beispiel 7 Datei-Upload
XML/HTML-Code
23. Inhalt in die Zwischenablage kopieren
1. <formulaire enctype='application/json'> 
2.  <entrée type='fichier' nom='fichier' multiple>
3. formulaire>
4.  
5. // Supposons que vous téléversiez 2 fichiers, les données Json générées sont :
6. {
7. "fichier": [
8.                                                    
"type": "texte/plain",
"nom": "dahut.txt",
"corps": "
11. REFBQUFBQUFIVVVVVVVVVVVCEhIQo="
},
                                                   
13. "type": "texte/plain",
14. "nom": "litany.txt",
15. "Corps": " SSBTDXN0IG5VDCBMZWFYLLLXVHCIBPCIBPCIB0AGUGBWLUZC1RWXSZIUCG
16. =="                                                           
]
}