Comment créer des objets JSON à partir de données de formulaire HTML ?

Création d'objets JSON à partir de données de formulaire HTML

Dans le domaine du développement Web, la transmission transparente des données aux serveurs est cruciale. Lorsqu'il s'agit de formulaires HTML, il peut être nécessaire de transmettre des données au format JSON. Cet article approfondit l'approche optimale pour y parvenir sans rencontrer d'obstacles.

Considérons le formulaire HTML suivant comme exemple :

<code class="html"><form action="myurl" method="POST" name="myForm">
  <label for="first_name">First Name:</label>
  <input type="text" name="first_name" id="fname">
  <label for="last_name">Last Name:</label>
  <input type="text" name="last_name" id="lname">
  <input value="Submit" type="submit" onclick="submitform()">
</form></code>

Notre objectif est de transformer les données de ce formulaire en un JSON et transmettez-le au serveur lors de la soumission du formulaire.

Au départ, vous avez peut-être tenté une solution en utilisant le code suivant :

<code class="javascript">function submitform(){
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  var j = {
    "first_name":"binchen",
    "last_name":"heris",
  };
  xhr.send(JSON.stringify(j));
}</code>

Cependant, cette approche échoue en raison d'un élément crucial défaut. Au lieu de récupérer les données du formulaire, vous avez créé manuellement un exemple d'objet JSON. Pour remédier à cela, nous devons rassembler les données du formulaire de manière dynamique.

La solution réside dans l'exploitation de la puissance de jQuery pour extraire les données du formulaire sous forme de tableau, que nous pouvons ensuite convertir en chaîne JSON :

<code class="javascript">var formData = JSON.stringify($("myForm").serializeArray());</code>

Cette ligne de code capture efficacement toutes les données du formulaire et les convertit au format JSON souhaité. Vous pouvez ensuite utiliser cette chaîne JSON dans votre requête AJAX ou, si AJAX n'est pas une option, l'incorporer dans une zone de texte masquée et soumettre le formulaire de manière traditionnelle.

De plus, si vous transmettez les données sous forme de chaîne JSON via un formulaire HTML standard, sachez qu'il doit être décodé côté serveur pour accéder aux points de données individuels sous forme de tableau.

En suivant cette approche, vous pouvez envoyer sans effort des objets JSON depuis vos formulaires HTML , garantissant une transmission transparente des données et une communication efficace avec le serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!