Object's function getting called while sending data via AJAX

Question

Sending a plain javascript object with function via AJAX request results in invoking this function. Why is that happening? The problem does not occur when sending JSON data. What is the best way to convert that object to JSON?

I enclose sample code that presents this behaviour.

var A = (function () {
    function A(value) {
        this.value = value;
    }
    A.prototype.getValue = function () {
        console.log('getValue');
        return this.value;
    };
    return A;
})();

$(document).ready(function () {
    var a = new A(10);

    var xhr = $.ajax("http://example.com/", {
        data: a,
        type: 'post',
        error: function (data) {
            console.log('error');
        },
        success: function (data) {
            console.log('success');
        },
        crossDomain: true
    });
}

Output of the code is:

getValue
success

Oh, wait! No it wouldn't, but why would you send a function with ajax, what are you expecting to get from that ? — adeneo
– adeneo, Commented Mar 5, 2014 at 22:46
jQuery needs to serialize the object, but I'm not sure why that would cause getValue to be called. — Barmar
– Barmar, Commented Mar 5, 2014 at 22:50
I don't want it to be sent, that is the problem. I thought $.ajax function would handle that automatically. — Kronkiel
– Kronkiel, Commented Mar 5, 2014 at 22:50
Handle what exactly? Convert what to JSON? You have a new instance of a function, and you're expecting to get what ? — adeneo
– adeneo, Commented Mar 5, 2014 at 22:51

Mattias Buelens · Accepted Answer · 2014-03-05 22:50:39Z

1

This is because jQuery.param (used internally by jQuery.ajax) uses the return value of a function when serializing the request parameters. From the docs:

As of jQuery 1.3, the return value of a function is used instead of the function as a String.

Thus, when jQuery.param encounters your a object and sees the getValue property being a function, it calls the function and uses the (serialized) the return value.

Either way, why would you want to pass such a complex object as request data? If you don't want to pass that function along with the request data, you're better off creating a custom serialization function for your A class, such as:

A.prototype.serialize = function() {
    return { value: this.value };
}

and use that instead:

var xhr = $.ajax("http://example.com/", {
    data: a.serialize(),
    // ...
});

answered Mar 5, 2014 at 22:50

Mattias Buelens

20.2k4 gold badges47 silver badges52 bronze badges

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

2 Comments

Kronkiel Over a year ago

That is the answer I have been looking for. Thanks!

Mattias Buelens Over a year ago

@Kronkiel I updated my answer. I'd suggest you add a function to create a "stripped down" object which can be safely passed to jQuery.param. You can still let jQuery do the conversion between the plain object and the request parameter string.

Collectives™ on Stack Overflow

Object's function getting called while sending data via AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related