为什么当我传入不同的对象时，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中实现了功能）。