Exemple détaillé d'utilisation du format JSON pour soumettre des formulaires dans les compétences du didacticiel HTML5_html5

La soumission des données de formulaire au format d'encodage JSON est une autre contribution majeure de HTML5 au développement et à l'évolution du WEB. Dans le passé, nos données de formulaire HTML étaient transmises côté serveur via une méthode clé-valeur. d'organisation des données. La forme est très primitive. La nouvelle méthode de soumission des données de formulaire au format JSON convertit toutes les données du formulaire au format JSON avec certaines spécifications, puis les transmet au serveur. Les données reçues par le serveur sont du code JSON qualifié directement utilisable. Comment déclarer la soumission d'un formulaire au format JSON

Tout le monde devrait savoir comment utiliser un formulaire pour télécharger un fichier. Cela nécessite d'ajouter l'instruction enctype="multipart/form-data" à la balise form en HTML, qui indique au navigateur d'envoyer les données du formulaire dans un fichier. mode de téléchargement. La déclaration du formulaire de soumission au format JSON est similaire à celle-ci. Elle s'écrit comme suit : enctype='application/json'.
Compatibilité avec les anciens navigateurs

La soumission de formulaires au format JSON est une toute nouvelle spécification en HTML5. Seuls les navigateurs modernes qui implémentent ces spécifications peuvent reconnaître la sémantique de enctype='application/json' et conditionner correctement les données du formulaire au format JSON. Pour certains anciens navigateurs, ainsi que pour les navigateurs qui n'ont pas encore implémenté ces normes, ils ne peuvent pas reconnaître ce que représente enctype='application/json', donc l'enctype du formulaire se dégradera automatiquement vers l'encodage par défaut application/x-www-form-urlencoded .Formater. Le code côté serveur peut déterminer comment recevoir les données en fonction de la valeur de enctype.
Exemple de format de formulaire de soumission au format d'encodage JSON
Exemple 1 Utilisation de base

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <formulaire enctype='application/json'> 
2. <input nom='nom' valeur='Bender'>
3. <sélectionner nom='arrière' >
4.  <option sélectionnée>Bitable< ;/option> 
5.  <option>Kickableoption>
6. sélectionner>
7. <entrée type='case à cocher' nom='brillant' coché>
8. formulaire>
10. //Les données Json générées sont
11. {
12. "nom": "Bender"
13. , "arrière": "mordable"
14. , "brillant" : vrai
15. }

Exemple 2 Lorsqu'il y a plusieurs champs de formulaire portant le même nom dans le formulaire, encodez-les sous forme de tableaux JSON

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <form enctype='application/json'>  
2.       <entrée type='numéro'  nom='bouteille-sur-mur' valeur='1'>  
3.       <entrée type='numéro'  nom='bouteille-sur-mur' valeur='2'>  
4.       <entrée type='numéro'  nom='bouteille-sur-mur' valeur='3'>  
5.     formulaire>  
6.         
7.     // 生成的Json数据是   
8.     {   
9.       "bouteille-sur-mur":   [1, 2, 3]   
10.     }  

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

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

1. <form enctype='application/json'>  
2.   <input nom='animal[ espèce]' valeur='Dahut'>  
3.   <input nom='animal[ nom]' valeur='Hypatie'>  
4.   <input nom='enfants[ 1]' valeur='Thelma'>  
5.   <input nom='enfants[ 0]' valeur='Ashley'>  
6. formulaire>  
7.     
8. // 生成的Json数据是   
9. {   
10.     "animal":  {   
11.         "espèce":  "Dahut"   
12.     ,   "nom":     "Hypatie"   
13.     }   
14. ,   "enfants":   ["Ashley", "Thelma"]   
15. }  

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

   

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

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

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

   

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

1. <form enctype='application/json'>  
2.       <input nom='animal[ 0][espèce]' valeur='Dahut'>  
3.       <input nom='animal[ 0][nom]' valeur='Hypatie'>  
4.       <input nom='animal[ 1][espèce]' valeur='Felis Stultus'>
5.       <input nom='animal[ 1][nom]' valeur='Billie'>  
6.     formulaire>  
7.         
8.     // 生成的Json数据是   
9.     {   
10.         "animal":  [   
11.             {   
12.                 "espèce":  "Dahut"   
13.             ,   "nom":     "Hypatie"   
14.              }   
15.         ,   {   
16.                 "espèce":  "Felis Stultus"   
17.             ,   "nom":     "Billie"   
18.              }   
19.         ]   
20.     }  

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

   

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

1. <formulaire enctype='application/json'> 
2.  <entrée nom='wow[ tel][profond][3][beaucoup][pouvoir][!]' valeur='Étonnant' >
3.  formulaire> 
4.  
5. // Les données Json générées sont
6. {
7. "wow": {
8. "tel": {
9. "profond": [
10.                                                                                                                                                  
, nul
, nul
, , {
« beaucoup » : {
"pouvoir": {
« ! » : «Étonnant»
                                                                           
17.                                                                    
                                                                     
18.                                                         
                                                                
19.                                                              
}
21. Exemple 7 Téléchargement de fichiers
Code XML/HTML
23. Copier le contenu dans le presse-papiers
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            }   
       ]   
   }