爲什麼當我傳入不同的對象時，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中實現了功能）。