Question posted in
You can find the official documentation here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search