当我传递不同的对象时,为什么AJAX会将相同的数据返回给回调？

Question

我试图对MVC控制器进行2次不同的调用.第一个返回一系列数据,第二个返回局部视图.在萤火虫中,我看到结果和状态都是"成功".

我试图传递一个回调来处理一个常见的AJAX方法的结果.首先是dataType'Json',第二个是dataType'HTML'.同样,如果我单独触发它们它们都可以工作但它们似乎在第二次调用时相互覆盖.

这是我的全局参数,它被附加在对象内部:

var ajaxOptions = {
    data: '',
    params: {},
    callback: "ajaxafter",
    url: "",
    ishtml: false,
    tag: 0,
    success: false
};

...
    //  get ajax options
me.getAjaxOptions = function () {
    return ajaxOptions;
}

p.AJAX = (function ($, me) {
    'use strict';
    var child = {};

    function returnAJAXDefault(o) {
        var dataType = (o.ishtml) ? "html" : "json";

        $.ajax({
            url: o.url,
            data: JSON.stringify(o.params),
            type: 'POST',
            dataType: dataType,
            contentType: 'application/json; charset=utf-8'         
        }).done(function (data) {
            o.data = data;
            o.success = true;

            console.dir(o)
            if (o.callback !== null && me[o.callback]) {
                me[o.callback](o);
                return;
            }
        }).fail(function (jqXhR) {
            o.data = jqXhR;
            if (o.callback !== null && me[o.callback]) {
                me[o.callback](o);
                return;
            }
        });
    }

    //  get ajax
    child.getAJAX = function (options) {
        returnAJAXDefault(options);
    }

    return child;

}(jQuery, obj));

这是我的ajax电话.

在页面上我尝试这样做.

$(document).ready(function () {

    p = (function ($, me) {
        me.ajaxafter = function (data) {
            console.log(1)
            if (data.tag == 1) {
                $('body').html(data.data)
            }

            if (data.tag == 0) {
                console.dir(data.data);
            }
        }

        me.ajaxafter1 = function (data) {
            console.log(2)
            if (data.tag == 1) {
                $('body').html(data.data)
            }

            if (data.tag == 0) {
                console.dir(data.data);
            }
        }

        function test1() {
            var axopts = me.getAjaxOptions();
            axopts.params = {
                varinput: 'tst'
            };
            axopts.url = "/Common/ReturnProjectList";
            axopts.callback = "ajaxafter";
            me.AJAX.getAJAX(axopts);

        }

        function test2() {
            var axopts1 = me.getAjaxOptions();
            axopts1.url = "/Common/ReturnPartial";
            axopts1.ishtml = true;
            axopts1.tag = 1;
            axopts1.callback = "ajaxafter1";
            me.AJAX.getAJAX(axopts1);

        }

        test1();
        test2();

    }(jQuery, obj));

});

萤火虫的结果附后.

如果我的问题措辞更好,请告诉我.继续大拇指向下.

此外,如果我的代码可以改进,我很想知道但是,真的在寻找为什么回报不是独立的.

提前致谢.

Answer 1

对象在Javascript中通过指针传递,因此当您调用me.getAjaxOptions()并将其传递给ajax调用时,您将完全相同的ajaxOptions对象传递给两个ajax调用.没有复制.它是完全相同的对象.因此,由于您将返回结果放入该对象,因此第二个ajax调用将覆盖第一个ajax调用的结果.

您在此代码中的许多设计实践都是导致您的问题的原因.首先,如果在由接收结果的函数创建的新对象中返回结果,则可以绕过整个问题.然后,您永远不会有机会一次调用的结果覆盖先前调用的结果.

而且,我真的建议你不要在已经存在的现有回调系统之上设计一个新的回调系统.真的没有理由.我的第一个建议就是使用jQuery已经为每个Ajax调用返回的Promise,因为它是一个设计丰富的系统,用于从Ajax调用等异步操作传回结果.

而且,如果你要设计一个新的回调系统,那么通过属性名称作为字符串传递回调是非常奇怪的,实际上没有必要.回调可以作为直接函数引用传递.

仅供参考,因为你有jQuery,你可以$.extend()用来制作一个对象的实际副本来解决这个问题,但我建议重新设计使用内置的promise系统来返回异步结果,因为它被认为是"现代的" "现在更有能力处理异步操作(成为ES6中的标准 - jQuery中的功能).