JQuery: Wrong form data encoding in AJAX request

Question

I am trying execute this simple AJAX request with JQuery:

const data = new FormData();
data.append("foo", "bar");
$.ajax({
    url: "http://localhost:8080/example",
    type: "post",
    data: data,
    processData: false
});

I check request by Google Chrome developer tools. I see that Content-type is application/x-www-form-urlencoded; charset=UTF-8 which is expected, but actual data sent in multipart encoding:

------WebKitFormBoundaryEzaaFpNlUo3QpKe1
Content-Disposition: form-data; name: "foo"

bar
------WebKitFormBoundaryEzaaFpNlUo3QpKe1--

Of course my backend application doesn't expect such encoding and fails. What is wrong and how to force JQuery to send data in urlencoded format? I tried pass extra headers or contentType options, but nothing works.

Use the serialize() function of jQuery instead of FormData — guggio
– guggio, Commented Apr 8, 2020 at 20:07
Are you sure your backend can't handle multipart/form-data? Try adding contentType: false. — Barmar
– Barmar, Commented Apr 8, 2020 at 20:09

Cagri Tacyildiz · Accepted Answer · 2020-04-08 20:27:41Z

1

u should also add contentType: false

  $.ajax({
        url: "http://localhost:8080/example",
        type: "post",
        data: data,
        processData: false,
        contentType: false,
        success: function (data) {

         }
    });

answered Apr 8, 2020 at 20:27

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vanna Over a year ago

Why should you add this? Can you explain your contribution?

Barmar · Accepted Answer · 2020-04-08 20:08:18Z

0

FormData is always sent as multipart/form-data. It's usually used when you're uploading a file or blob, which can't be URL-encoded.

If you want URL-encoded, don't use FormData. Use a regular object, and jQuery will encode it properly.

const data = {foo: "bar"};

Also, don't use processData: false when you're doing this.

answered Apr 8, 2020 at 20:08

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

JQuery: Wrong form data encoding in AJAX request

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related