Comment afficher les données du formulaire avec l'api fetch ?

Question

Mon code :

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

J'ai essayé de poster mon formulaire en utilisant l'api fetch, et le corps qu'il envoie est comme :

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(Je ne sais pas pourquoi le nombre en limite est changé à chaque envoi...)

Je voudrais qu'il envoie les données avec "Content-Type" : "application/x-www-form-urlencoded", que dois-je faire ? Ou si je dois faire avec, comment décoder les données dans mon contrôleur ?

---

Pour qui répond à ma question, je sais que je peux le faire avec :

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

Ce que je veux, c'est quelque chose comme $("#form").serialize() en jQuery (sans utiliser jQuery) ou le moyen de décoder les données multipart/formulaires dans le contrôleur. Merci pour vos réponses.

Answer 1

Pour compléter les bonnes réponses ci-dessus, vous pouvez également éviter de définir explicitement l'action en HTML et utiliser un gestionnaire d'événement en javascript, en utilisant "this" comme formulaire pour créer l'objet "FormData".

Formulaire Html :

<form id="mainForm" class="" novalidate>
<!--Whatever here...-->
</form>

Dans votre JS :

$("#mainForm").submit(function( event ) {
  event.preventDefault();
  const formData = new URLSearchParams(new FormData(this));
  fetch("http://localhost:8080/your/server",
    {   method: 'POST',
        mode : 'same-origin',
        credentials: 'same-origin' ,
        body : formData
    })
    .then(function(response) {
      return response.text()
    }).then(function(text) {
        //text is the server's response
    });
});

Answer 2

Pour afficher les données du formulaire avec l'api fetch, essayez ce code, il fonctionne pour moi ^_^

function card(fileUri) {
let body = new FormData();
let formData = new FormData();
formData.append('file', fileUri);

fetch("http://X.X.X.X:PORT/upload",
  {
      body: formData,
      method: "post"
  });
 }

Answer 3

Utilisez ceci pour une api JSON :

Envoyer une requête POST

async function write(param) {
  var zahl = param.getAttribute("data-role");

  let mood = {
    appId: app_ID,
    key: "",
    value: zahl
  };

  let response = await fetch(web_api, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(mood)
  });
  console.log(currentMood);
}

Envoyer une requête GET

async function get() {

  let response = await fetch(web_api + "/App/" + app_ID, {
    method: "GET",
    headers: {
      "Content-Typ": "application/json"
    }
  });

  let todos = await response.json();

Envoyer une demande DELETE

function remove() {
  return fetch(web_api, {
    method: "DELETE"
  }).then(response => {
    if (!response.ok) {
      throw new Error("There was an error processing the request");
    }
  });
}

Envoyer une demande PUT

function updateTodo() {
    return fetch(web_api, {
      method: "PUT",
      body: JSON.stringify(todo),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      if (!response.ok) {
         throw new Error("There was an error processing the request");
      }
    });
}