Comment envoyer des données de formulaire en tant qu'objet JSON à l'aide d'AJAX ?

Comment envoyer des données de formulaire en tant qu'objet JSON à l'aide d'AJAX

Lorsqu'un utilisateur soumet un formulaire HTML, vous souhaiterez peut-être envoyer ses données à le serveur en tant qu'objet JSON pour un traitement pratique. Voici comment y parvenir en utilisant AJAX :

1. Créer un formulaire et un gestionnaire de soumission :

   Définir un formulaire HTML avec des champs de saisie de texte pour collecter les utilisateurs données. Ajoutez un gestionnaire d'événements onclick au bouton de soumission qui gère la soumission du formulaire.

<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 type="submit" value="Submit" onclick="submitform()">
</form></code>

2. Capturez les données du formulaire en JavaScript :

   Dans la fonction submitform(), récupérez les données complètes du formulaire sous forme de tableau à l'aide de la méthode serializeArray() de jQuery :

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

3. AJAX Requête avec type de contenu JSON :

   Créez un objet XMLHttpRequest, spécifiez la méthode POST et l'URL du point de terminaison, et définissez l'en-tête Content-Type sur "application/json":

<code class="javascript">var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');</code>

4. Envoyer les données codées en JSON :

   Envoyer les données du formulaire codées en JSON au serveur à l'aide de xhr.send() :

<code class="javascript">xhr.send(formData);</code>

5. Gérer la réponse du serveur :

   Implémentez l'écouteur d'événement onload pour gérer la réponse du serveur et effectuer les actions nécessaires, comme l'affichage d'un message de réussite ou la redirection vers une autre page.

En suivant ces étapes, vous pouvez envoyer des objets JSON contenant des données de formulaire à votre serveur pour un traitement efficace et polyvalent.

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!