Comment transmettre les données d'un formulaire HTML au format JSON à l'aide d'Ajax ?

Transmission de données JSON à l'aide de données de formulaire HTML

Dans le domaine du développement Web, il est souvent nécessaire de transmettre des données d'un formulaire HTML à un serveur. Bien que les méthodes traditionnelles existent, cet article explore une approche alternative : envoyer les données du formulaire sous forme d'objet JSON.

Le défi

Supposons que vous ayez un formulaire HTML avec ce qui suit structure :

<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>

L'objectif est d'envoyer les données saisies dans ce formulaire sous forme d'objet JSON lorsque l'utilisateur clique sur le bouton "Envoyer".

Erreur initiale

Certains peuvent tenter d'utiliser ce code :

<code class="javascript">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

Cependant, cette approche échoue car elle ne récupère pas les données réelles des entrées du formulaire.

解决方案

La clé pour résoudre ce problème réside dans l'obtention des données complètes du formulaire. Ceci peut être réalisé en utilisant le code suivant :

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

La méthode serializeArray() convertit les données du formulaire en un tableau de paires clé-valeur. En convertissant ce tableau en chaîne JSON, nous pouvons obtenir l'objet JSON souhaité.

Intégration avec Ajax

Pour transmettre les données JSON en utilisant Ajax, vous pouvez utiliser le code suivant :

<code class="javascript">$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType: "application/json"
});</code>

Désormais, lorsqu'un utilisateur soumet le formulaire, l'objet JSON contenant les données du formulaire sera envoyé à l'URL du serveur spécifié via Ajax.

Cette approche fournit une solution pratique et efficace d'envoyer des données de formulaire HTML sous forme d'objet JSON, améliorant ainsi la polyvalence et les fonctionnalités de vos applications Web.

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!