为什么jQuery.ajax（）调用我的对象函数？

Question

I'm having an issue where jQuery.ajax() is calling my data objects functions. For example, I have an object structure similar to the following:

var TestFactory = (function () {
    var _id;
    var _attributes;

    return {
        createObject: function (objectId) {
            var value = null;
            _id = objectId;
            _attributes = {};

            function _showErrorStatus() {
                $('label')
                    .css('background-color', 'red')
                    .css('color', 'black')
                    .text('jQuery called me...');
            }

            function _attr(key, value) {
                if (value == null) {
                    return _attributes[key];
                }

                _attributes[key] = value;

                return this;
            }

            return {
                id: _id,
                attributes: _attributes,
                showErrorStatus: _showErrorStatus,
                attr: _attr,                
            }
        }
    }
})();

I'd like to use this object as the data value for my jQuery.ajax() call, as follows:

var myObject = TestFactory.createObject(12345);

myObject.attr('name', 'Fred Flinstone');

$.ajax({
    url: '/echo/json/',
    type: 'GET',
    data: myObject,
    dataType: 'json',
});

The issue I'm running into is jQuery.ajax() is calling the showErrorStatus() function from the object returned by the factory --nowhere in my code do I call this function.

I like the OOP qualities I get out of using this object, so is there any way to handle this case without a significant rewrite (eg, dropping all my functionality from the "class")?

NOTE: I found it difficult to explain this problem, so here is a complete running example on jsfiddle .

Answer 1

It happens because it's a feature, though not documented as far as I can tell.

If you pass an object, then it assumes you want it to call any functions that are values of object properties.

Answer 2

Use JSON.stringify (not a jQuery method).

$.ajax({
    url: '/echo/json/',
    type: 'GET',
    data: JSON.stringify(myObject),
    dataType: 'json',
});

http://jsfiddle.net/HJ9AS/10/

Answer 3

One way of doing it is to use a function like Underscore's pick() . It can be used to cherry-pick certain properties you need from the object. It is a useful library anyways, but you can also implement this simple method if you wish.

$.ajax({
    url: '/echo/json/',
    type: 'GET',
    /* only send id and attributes! */
    data: _.pick(myObject, 'id', 'attributes'),
    dataType: 'json',
});

It might be a nice habit to always whitelist stuff , not just send everything blindly. Specifying exactly what to send can save you from future surprises (like the one you just encountered). Most of the time you simply don't want to send everything that is stored in your object.

You can also implement some way for your object to be able to return its sendable contens. It could get a .getJSON() method that just collects from the object everything to be sent.

---

Concerning the function calling:

Processing the data property uses $.param() , which has this in the docs:

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

This is a feature, not a bug :). I understand the logic behind it, because if there is a function in the object that you just specified as data to be sent, there must be a good reason behind it...

Answer 4

Instead of passing data: myObject ,

try setting this: var serializedObject = myObject.param()

then passing data: serializedObject

Check out jQuery's param function here .