通过 AJAX 发送数据时调用对象的函数答案

【问题标题】：Object's function getting called while sending data via AJAX通过 AJAX 发送数据时调用对象的函数
【发布时间】：2014-03-05 22:41:16
【问题描述】：

通过 AJAX 请求发送带有函数的普通 javascript 对象会导致调用此函数。为什么会这样？发送 JSON 数据时不会出现该问题。将该对象转换为 JSON 的最佳方法是什么？

我附上了呈现这种行为的示例代码。

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
    });
}

代码的输出是：

getValue
success

【问题讨论】：

不会new A(10); 执行那个函数吗？
哦，等等！不，它不会，但是你为什么要用 ajax 发送一个函数，你期望从中得到什么？
jQuery 需要序列化对象，但我不确定为什么会导致 getValue 被调用。
我不希望它被发送，这就是问题所在。我认为 $.ajax 函数会自动处理。
具体处理什么？将什么转换为 JSON？你有一个新的函数实例，你期望得到什么？

标签： javascript jquery ajax json object

【解决方案1】：

这是因为jQuery.param（jQuery.ajax 内部使用）在序列化请求参数时使用了函数的返回值。 From the docs:

从 jQuery 1.3 开始，函数的返回值被用作字符串而不是函数。

因此，当jQuery.param 遇到您的a 对象并看到getValue 属性是一个函数时，它会调用该函数并使用（序列化的）返回值。

无论哪种方式，您为什么要将如此复杂的对象作为请求数据传递？如果您不想将该函数与请求数据一起传递，最好为您的 A 类创建一个自定义序列化函数，例如：

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

并改用它：

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

【讨论】：

这就是我一直在寻找的答案。谢谢！
@Kronkiel 我更新了我的答案。我建议您添加一个函数来创建一个“精简”对象，该对象可以安全地传递给jQuery.param。你仍然可以让 jQuery 做普通对象和请求参数字符串之间的转换。