Why does a FormData object work but not a regular object in Jquery AJAX submit?

Question

I am confused about using data objects in my AJAX submit.

Here's my submit AJAX script:

$.ajax({
  url:'/library/php/triggers.php',
  type:'POST',
  data:data,
  cache:false,
  dataType:'json',
  processData:false,
  contentType:false,
  success:function(result){console.log(result);}
});

This data works:

 var data=new FormData(this);
 data.append('hello','my friend');

But this data does not work:

var data={"hello":"my friend"};

Aren't these both JSON objects? What's the difference between these?

I also tried changing contentType:false to contentType:'application/json' without success.

ikiK · Accepted Answer · 2021-04-30 02:28:18Z

To address the difference between the two: If you just did

var data = new FormData();
data.append('hello', 'my friend');

console.log(data)
var data2 = {
  "hello": "my friend"
};

And then check your dev tools you would notice that:

    FormData {  }  
    <prototype>: FormDataPrototype { append: append(), delete: delete(), get: get(), … }
    append: function append()
    constructor: function ()
    delete: function delete()
    entries: function entries()
    forEach: function forEach()
    get: function get()
    getAll: function getAll()
    has: function has()
    keys: function keys()
    set: function set()
    values: function values()
    Symbol(Symbol.toStringTag): "FormData"
    Symbol(Symbol.iterator): 
function entries()`<prototype>: Object { … }

Form.data() has a lot of other properties in constructor associated with methods that you can use on it, so browser treats it differently.
Last function : function entries() <prototype>: Object { … } is the same as regular object where data is being stored with getters and setters:

Object { hello: "my friend" }

hello: "my friend"

<prototype>: Object { … }
__defineGetter__: function __defineGetter__()
__defineSetter__: function __defineSetter__()
__lookupGetter__: function __lookupGetter__()
__lookupSetter__: function __lookupSetter__()
__proto__: 
constructor: function Object()
hasOwnProperty: function hasOwnProperty()
isPrototypeOf: function isPrototypeOf()
propertyIsEnumerable: function propertyIsEnumerable()
toLocaleString: function toLocaleString()
toString: function toString()
valueOf: function valueOf()
<get __proto__()>: function __proto__()
<set __proto__()>: function __proto__()

Also take notice that you last creation of object converted your string 'hello' into key hello: while form data converts all keys and values into string.

So, in short this two are not the same objects.

charlietfl · Accepted Answer · 2021-04-30 02:11:31Z

1

The processing:false is because browsers internally process FormData object the same way they do when submitting a <form>.

You want jQuery to process the plain object. It uses $.param() internally to create a form encoded string

var data = {"hello":"my friend"};

$.ajax({
  url:'/library/php/triggers.php',
  type:'POST',
  data:data,  
  dataType:'json',// what you expect to recieve  
  success:function(result){console.log(result);}
});

To recieve in php:

$hello = $_POST['hello'];

What jQuery does internally with the object:

var data = {"hello":"my friend", foo:"bar"};

var processed = $.param(data);

console.log(processed)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Apr 30, 2021 at 2:11

answered Apr 30, 2021 at 2:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Maciek Over a year ago

$.param doesn't work for me when I have contentType:false, but if I remove contentType:false, FormData doesn't work.

charlietfl Over a year ago

You don't need to use $.param yourself or even know it is there. I only showed it for explanation of what is done internally. As for the FormData the browser sets the content type header

Collectives™ on Stack Overflow

Why does a FormData object work but not a regular object in Jquery AJAX submit?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related