How do I post form data with fetch api

Question

My 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       I tried to post my form using fetch api  and the body it sends is like   -----------------------------114782935826962 Content-Disposition  form-data  name  email   test example com -----------------------------114782935826962 Content-Disposition  form-data  name  password   pw -----------------------------114782935826962--    I don t know why the number in boundary is changed every time it sends      I would like it to send the data with  Content-Type    application x-www-form-urlencoded   what should I do  Or if I just have to deal with it  how do I decode the data in my controller     To whom answer my question  I know I can do it with   fetch  api xxx         body   email test example com amp password pw       headers             Content-Type    application x-www-form-urlencoded              method   post       What I want is something like     form   serialize   in jQuery  w o using jQuery  or the way to decode mulitpart form-data in controller  Thanks for your answers though

User · Answer

Use FormData and fetch to grab and send data fetch form action   method  post   body  new FormData form       x000D   x000D  function send e form      fetch form action   method  post   body  new FormData form        console log  We send post asynchronously  AJAX       e preventDefault      x000D   lt form method  POST  action  myapi send  onsubmit  send event this   gt       lt input hidden name  crsfToken  value  a1e24s1  gt       lt input name  email  value  a b com  gt       lt input name  phone  value  123-456-789  gt       lt input type  submit  gt       lt  form gt   Look on chrome console gt network before after  submit  x000D   x000D   x000D

User · Answer

Client  Do not set the content-type header      Build formData object  let formData   new FormData    formData append  name    John    formData append  password    John123     fetch  api SampleData                 body  formData          method   post            Server  Use the FromForm attribute to specify that binding source is form data    Route  api  controller     public class SampleDataController   Controller        HttpPost      public IActionResult Create  FromForm UserDto dto                return Ok             public class UserDto       public string Name   get  set        public string Password   get  set

User · Answer

To quote MDN on FormData  emphasis mine       The FormData interface provides a way to easily construct a set of key value pairs representing form fields and their values  which can then be easily sent using the XMLHttpRequest send   method  It uses the same format a form would use if the encoding type were set to  multipart form-data     So when using FormData you are locking yourself into multipart form-data  There is no way to send a FormData object as the body and not sending data in the multipart form-data format   If you want to send the data as application x-www-form-urlencoded you will either have to specify the body as an URL-encoded string  or pass a URLSearchParams object  The latter unfortunately cannot be directly initialized from a form element  If you don   t want to iterate through your form elements yourself  which you could do using HTMLFormElement elements   you could also create a URLSearchParams object from a FormData object   const data   new URLSearchParams    for  const pair of new FormData formElement         data append pair 0   pair 1       fetch url        method   post       body  data      then         Note that you do not need to specify a Content-Type header yourself     As noted by monk-time in the comments  you can also create URLSearchParams and pass the FormData object directly  instead of appending the values in a loop   const data   new URLSearchParams new FormData formElement      This still has some experimental support in browsers though  so make sure to test this properly before you use it

User · Answer

Write Data async function write param      var zahl   param getAttribute  quot data-role quot       let mood         appId  app ID      key   quot  quot       value  zahl         let response   await fetch web api        method   quot POST quot       headers           quot Content-Type quot    quot application json quot             body  JSON stringify mood          console log currentMood       Get Data async function get        let response   await fetch web api    quot  App  quot    app ID        method   quot GET quot       headers           quot Content-Typ quot    quot application jason quot                 let todos   await response json        Remove Data function remove id      return fetch web api quot    id        method   quot DELETE quot       then response   gt        if   response ok          throw new Error  quot Todo konnte nicht entfernt werden  quot                    async function removeAll       let response   await fetch web api    quot  App  quot    app ID        method   quot GET quot       headers           quot Content-Typ quot    quot application jason quot                let todos   await response json      console log todos      for  let todo of todos        await remove todo id             Update Data   function updateTodo todo    return fetch  https                      api items   todo id        method   quot PUT quot     body  JSON stringify todo     headers         quot Content-Type quot    quot application json quot           then  response    gt      if   response ok        throw new Error  quot Todo konnte nicht upgedated werden  quot

User · Answer

With fetch api it turned out that you do NOT have to include headers  quot Content-type quot    quot multipart form-data quot   So the following works  let formData   new FormData   formData append  quot nameField quot   fileToSend   fetch yourUrlToPost       method   quot POST quot      body  formData     Note that with axios I had to use the content-type

User · Answer

These can help you  let formData   new FormData                formData append  quot name quot    quot John quot                formData append  quot password quot    quot John123 quot                fetch  quot https   yourwebhook quot                   method   quot POST quot                 mode   quot no-cors quot                 cache   quot no-cache quot                 credentials   quot same-origin quot                 headers                     quot Content-Type quot    quot form-data quot                                 body  formData                               router push  quot  registro-completado quot                else                  doc data   will be undefined in this case             console log  quot No such document  quot                                    catch function error              console log  quot Error getting document  quot   error

User · Answer

You can set body to an instance of URLSearchParams with query string passed as argument  fetch   path to server       method  POST    body new URLSearchParams  email test example com amp password pw         x000D   x000D  document forms 0  onsubmit   async e    gt    x000D    e preventDefault    x000D    const params   new URLSearchParams     new FormData e target  entries      x000D       fetch   path to server    method  POST   body params   x000D    const response   await new Response params  text    x000D    console log response   x000D    x000D   lt form gt  x000D     lt input name  email  value  test example com  gt  x000D     lt input name  password  value  pw  gt  x000D     lt input type  submit  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

To post form data with fetch api  try this code it works for me     function card fileUri    let body   new FormData    let formData   new FormData    formData append  file   fileUri    fetch  quot http   X X X X PORT upload quot             body  formData        method   quot post quot

User · Answer

To add on the good answers above you can also avoid setting explicitly the action in HTML and use an event handler in javascript  using  quot this quot  as the form to create the  quot FormData quot  object Html form    lt form id  quot mainForm quot  class  quot  quot  novalidate gt   lt  --Whatever here   -- gt   lt  form gt   In your JS      quot  mainForm quot   submit function  event       event preventDefault      const formData   new URLSearchParams new FormData this      fetch  quot http   localhost 8080 your server quot           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

[javascript] How do I post form data with fetch api?

Examples related to javascript

Examples related to ajax

Examples related to fetch-api