Analyse approfondie du format d'encodage JSON pour soumettre le formulaire data_json

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 la méthode clé-valeur. il manquait la gestion de l'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 le fichier HTML. mode de téléchargement de fichiers. 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 regrouper 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

<form enctype='application/json'>
 <input name='name' value='Bender'>
 <select name='hind'>
  <option selected>Bitable</option>
  <option>Kickable</option>
 </select>
 <input type='checkbox' name='shiny' checked>
</form>

// 生成的Json数据是
{
 "name":  "Bender"
, "hind":  "Bitable"
, "shiny": true
}

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

<form enctype='application/json'>
 <input type='number' name='bottle-on-wall' value='1'>
 <input type='number' name='bottle-on-wall' value='2'>
 <input type='number' name='bottle-on-wall' value='3'>
</form>

// 生成的Json数据是
{
 "bottle-on-wall":  [1, 2, 3]
}

Exemple 3 Une structure complexe dans laquelle les noms de champs de formulaire apparaissent sous forme de tableaux

<form enctype='application/json'>
 <input name='pet[species]' value='Dahut'>
 <input name='pet[name]' value='Hypatia'>
 <input name='kids[1]' value='Thelma'>
 <input name='kids[0]' value='Ashley'>
</form>

// 生成的Json数据是
{
  "pet": {
    "species": "Dahut"
  ,  "name":   "Hypatia"
  }
,  "kids":  ["Ashley", "Thelma"]
}

Exemple 4 Dans l'exemple ci-dessus, la valeur du numéro de tableau manquante sera remplacée par null

<form enctype='application/json'>
 <input name='hearbeat[0]' value='thunk'>
 <input name='hearbeat[2]' value='thunk'>
</form>

// 生成的Json数据是
{
  "hearbeat":  ["thunk", null, "thunk"]
}

Exemple 5 Format d'imbrication de tableaux multiples, nombre illimité de niveaux d'imbrication

<form enctype='application/json'>
 <input name='pet[0][species]' value='Dahut'>
 <input name='pet[0][name]' value='Hypatia'>
 <input name='pet[1][species]' value='Felis Stultus'>
 <input name='pet[1][name]' value='Billie'>
</form>

// 生成的Json数据是
{
 "pet": [
  {
   "species": "Dahut"
  , "name":  "Hypatia"
  }
 , {
   "species": "Felis Stultus"
  , "name":  "Billie"
  }
 ]
}

Exemple 6 Vraiment, il n'y a pas de limite de dimension de tableau !

<form enctype='application/json'>
 <input name='wow[such][deep][3][much][power][!]' value='Amaze'>
</form>

// 生成的Json数据是
{
 "wow": {
  "such": {
   "deep": [
    null
   , null
   , null
   , {
     "much": {
      "power": {
       "!": "Amaze"
      }
     }
    }
   ]
  }
 }
}

Exemple 7 Téléchargement de fichiers

<form enctype='application/json'>
 <input type='file' name='file' multiple>
</form>

// 假设你上传了2个文件, 生成的Json数据是:
{
 "file": [
  {
   "type": "text/plain",
   "name": "dahut.txt",
   "body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
  },
  {
   "type": "text/plain",
   "name": "litany.txt",
   "body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
  }
 ]
}