web-dev-qa-db-fra.com

Comment envoyer un objet JSON à l'aide de données de formulaire html

J'ai donc ce formulaire HTML:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Quel serait le moyen le plus simple d'envoyer les données de ce formulaire sous forme d'objet JSON à mon serveur lorsqu'un utilisateur clique sur soumettre?

UPDATE: Je suis allé aussi loin que cela, mais cela ne semble pas fonctionner:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        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));

Qu'est-ce que je fais mal?

javascriptjqueryhtmljsonforms
108
kstratis

Obtenir des données de formulaire complètes sous forme de tableau et JSON le stringifier.

var formData = JSON.stringify($("#myForm").serializeArray());

Vous pouvez l'utiliser plus tard en ajax. Ou si vous n'utilisez pas ajax; mettez-le dans la zone de texte cachée et transmettez-le au serveur. Si ces données sont transmises sous forme de chaîne json via des données de forme normales, vous devez les décoder à l'aide de json_decode . Vous obtiendrez alors toutes les données d'un tableau.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});
117
SachinGutte

HTML ne fournit aucun moyen de générer du JSON à partir de données de formulaire.

Si vous voulez vraiment le gérer depuis le client, vous devrez alors utiliser JavaScript pour:

  1. rassemblez vos données à partir du formulaire via DOM
  2. organiser dans un objet ou un tableau
  3. générer du JSON avec JSON.stringify
  4. POST-le avec XMLHttpRequest

Vous feriez probablement mieux de vous en tenir aux données application/x-www-form-urlencoded et de les traiter sur le serveur au lieu de JSON. Votre formulaire n'a pas de hiérarchie compliquée qui tirerait profit d'une structure de données JSON.

Mise à jour en réponse à une réécriture majeure de la question…

  • Votre JS n'a pas de gestionnaire readystatechange, vous ne faites donc rien avec la réponse
  • Vous déclenchez le JS lorsque vous cliquez sur le bouton d'envoi sans annuler le comportement par défaut. Le navigateur soumettra le formulaire (de manière habituelle) dès que la fonction JS sera terminée.
43
Quentin

votre code est correct mais jamais exécuté, cause du bouton de soumission [type = "submit"] il suffit de le remplacer par type = button

<input value="Submit" type="button" onclick="submitform()">

dans votre script; formulaire n'est pas déclaré.

let form = document.forms[0];
xhr.open(form.method, form.action, true);
1
tdjprog