How to pass data from JavaScript to PHP without reloading the page? [duplicate]

1 day ago 1

ARTICLE AD BOX

Asked 8 years, 7 months ago

Viewed 698k times

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" [email protected] -----------------------------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 protected]&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.

asked Oct 9, 2017 at 6:27

Zack

4,5292 gold badges14 silver badges12 bronze badges

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.

answered Oct 9, 2017 at 9:19

poke

393k80 gold badges597 silver badges632 bronze badges

14 Comments

You can also use an object or just FormData in the constructor directly instead of a loop: new URLSearchParams(new FormData(formElement))

2018-01-19T11:32:28.88Z+00:00

@monk-time At the time of writing that answer, the constructor argument to URLSearchParams was very new and had very limited support.

2018-01-19T11:38:23.337Z+00:00

sorry, that wasn't a complaint, just a note to everyone who will read this in the future.

2018-01-19T11:52:50.3Z+00:00

@Prasanth You may specify the content type yourself explicitly, but you have to pick the correct one. It’s easier to just leave it off and have fetch take care of it for you.

2018-07-30T21:29:08.247Z+00:00

if you need to post FormData there is no need to use URLSearchParams fetch(url, { method: 'post', body: new FormData(form_element), })

2020-09-30T11:56:04.393Z+00:00

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

answered Oct 9, 2017 at 7:20

regnauld

4,3563 gold badges26 silver badges23 bronze badges

6 Comments

While this works, this does not send the data as application/x-www-form-urlencoded which is what OP is asking for.

2017-10-09T09:23:02.25Z+00:00

For me, it worked when i REMOVED Content-Type from the header and let the browser do it automatically. Thanks!

2018-11-16T10:25:54.547Z+00:00

If you don't set 'Content-type' for Fetch, its gonna set it as multipart/form-data, which is what it should be for form data! Then you can use multer in expressjs to parse that data format easily.

2019-09-23T07:52:56.027Z+00:00

This worked for me. I'm using Laravel 8 (Sanctum) as backend.

2021-12-25T16:10:33.77Z+00:00

Using laravel 9 (passport) and also worked for me

2022-12-23T06:31:51.443Z+00:00

Use FormData and fetch to grab and send data

fetch(form.action, {method:'post', body: new FormData(form)});

For x-www-form-urlencoded use URLSearchParams

answered Jan 21, 2020 at 18:41

9 Comments

Thank you very much, this is what I was looking for and it's amazing how easy pure JavaScript can be nowadays. Just look at that beautiful 1 liner fetch code that post the <form> data, I'm still amazed how I found this. Bye bye jQuery.

2020-10-18T16:08:20.233Z+00:00

Not important here at all but there's a typo in hidden input's name. For anyone who wonders why that input is there, csrf stands for Cross-site Request Forgery.

2021-07-21T08:08:18.613Z+00:00

The option method: 'post' has no effect since the browser will use the method attribute of the form passed to FormData. Even when the method attribute is not defined in form the browser will fallback to default GET method.

2021-11-11T19:36:26.417Z+00:00

@MarcoMannes if your remove mehtod:'post' from fetch params in snippet above, you will get Request with GET/HEAD method cannot have body. exception. If you remove method="POST" from html in above snippet, the method:'post' (in fetch params) will have effect - and browser will send POST - I check this by modify this snippet and using chrome>network tab (so actually we can remove this from html... but I will left it)

2021-11-11T22:03:40.17Z+00:00

Is form.action the endpoint url?

2021-11-13T17:20:49.883Z+00:00

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 protected]&password=pw") })

document.forms[0].onsubmit = async(e) => { e.preventDefault(); const params = new URLSearchParams([...new FormData(e.target).entries()]); // fetch("/path/to/server", {method:"POST", body:params}) const response = await new Response(params).text(); console.log(response); } <form> <input name="email" value="[email protected]"> <input name="password" value="pw"> <input type="submit"> </form>

answered Oct 9, 2017 at 6:45

4 Comments

Reflect.apply(params.set, params, props) is a particularly unreadable way of saying params.set(props[0], props[1]).

2017-10-09T09:26:50.773Z+00:00

@poke Reflect.apply(params.set, params, props) is readable from perspective here.

2017-10-09T13:30:49.453Z+00:00

What if I send a 5MB image file over body:new URLSearchParams("img="+my5MBimage) ?

2020-10-17T17:09:06.19Z+00:00

With fetch api it turned out that you do NOT have to include headers "Content-type": "multipart/form-data".

So the following works:

let formData = new FormData() formData.append("nameField", fileToSend) fetch(yourUrlToPost, { method: "POST", body: formData })

Note that with axios I had to use the content-type.

answered Feb 3, 2021 at 9:43

nicolass

7368 silver badges8 bronze badges

1 Comment

I am sending a file and some data from React to Flask and it didn't work until i removed Content-type. Thank you :)

2021-04-15T13:45:36.55Z+00:00

"body:FormData" works but there're type complains, also "FormData" sets multipart headers. To make the things simplier, "body:URLSearchParams" with inline construction and headers set manually may be used :

function getAccessToken(code) { return fetch(tokenURL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': '*/*' }, body: new URLSearchParams({ 'client_id':clientId, 'client_secret':clientSecret, 'code':code, 'grant_type': grantType, 'redirect_uri':'', 'scope':scope }) } ) .then( r => return r.json() ).then( r => r.access_token ) }

answered Jul 1, 2022 at 5:04

1 Comment

This is much nicer for when your data is already an object. Nice!

2023-07-26T20:43:23.547Z+00:00

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 "this" as the form to create the "FormData" object

Html form :

In your 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 }); });

answered Dec 26, 2020 at 16:36

👨‍💻These can help you:

answered Feb 1, 2021 at 20:24

2 Comments

Can you add a bit more explanation as to what you changed that made it better

2021-02-01T21:29:38.4Z+00:00

no-cors and the Content-Type header are almost certainly wrong.

2022-04-18T21:03:43.993Z+00:00

There are instructions on the MDN that the browser will automatically handle Content-Type:

A request will also automatically set a Content-Type header if none is set in the dictionary.

So we don't need to specify 'content-type' when we send a fetch request.

If set content-type in headers. Browser will not try to split formdata in request payload.

I'm using fathcer to handle FormData, the same behavior as XHR.

import { formData } from '@fatcherjs/middleware-form-data'; import { json } from '@fatcherjs/middleware-json'; import { fatcher } from 'fatcher'; fatcher({ url: '/bar/foo', middlewares: [json(), formData()], method: 'PUT', payload: { bar: 'foo', file: new File() }, headers: { 'Content-Type': 'multipart/form-data', }, }) .then(res => { console.log(res); }) .catch(err => { console.error(error); });

djvg

14.9k7 gold badges85 silver badges120 bronze badges

answered Jul 13, 2022 at 8:49

@KamilKiełczewski answer is great if you are okay with the form data format being in form multipart style, however if you need the form submitted in query parameter styles:

You can also pass FormData directly to the URLSearchParams constructor if you want to generate query parameters in the way a would do if it were using simple GET submission.

form = document.querySelector('form') const formData = new FormData(form); formData["foo"] = "bar"; const payload = new URLSearchParams(formData) fetch(form.action, payload)

answered Mar 29, 2022 at 14:12

run_the_race

2,5503 gold badges60 silver badges92 bronze badges

With Content-Type: "mulitipart/form-data"

const formData = new FormData(document.getElementById("form")) fetch("http://localhost:8000/auth/token", { method: "POST", body: formData, headers: { "Content-Type": "multipart/form-data" } })

With Content-Type: "application/x-www-form-urlencoded"

const formData = new URLSearchParams(new FormData(document.getElementById("form"))) fetch("http://localhost:8000/auth/token", { method: "POST", body: formData, headers: { "Content-Type": "application/x-www-form-urlencoded" } })

answered Sep 15, 2022 at 12:26