AJAX请求不在js中呈现

Question

我有一个网页，当它被加载时发出ajax请求，从后端获取JSON []格式的一些数据并将其显示在页面上。该网页与MVC .NET

加载从后端事件的函数生成：

function initEvents() { 
    $.ajax({ 
     url: '/Work/GetEvents/' + id, type: "GET", dataType: 'json', 
     success: function (data) { 
      events = data; 
     }, 
     error: function(data) { 
      // Note: hardcoded JSON event in here 
      events = hardcodedEvents; 
     }, 
     complete: function(data) { 
      // Add events 
      for (var i = 0; i < events.length; i++){ 
       addEvent(events[i]); 
      } 
     } 
    }); 
} 

当我做请求失败（即更改URL指向虚假数据） - 它会在error: function(data) - 这样的硬编码的JSON对象加载罚款，然后它会在“完整：功能（数据）`和1

但是增加了事件1，当我使用了正确的URL，并获得事件从后端，似乎事件来得太晚;就像它退出complete部分一样。问题是：为什么会发生这种情况？每当回复回复时，我都认为加载了complete。我相信这个错误吗？我该如何解决这个问题，以便将事件从后端加载到页面中？

谢谢！

Answer 1

events未定义在complete事件的范围内。您应该将events数据传递给另一个函数，或者只需将addEvent逻辑移至事件处理函数内。例如：

function onEventData(data) { 
    for (var i = 0; i < data.length; i++){ 
     addEvent(data[i]); 
    } 
} 

function initEvents() { 
    $.ajax({ 
     url: '/Work/GetEvents/' + id, type: "GET", dataType: 'json', 
     success: onEventData, 
     error: function(data) { 
      // Note: hardcoded JSON event in here 
      onEventData(hardcodedEvents); 
     } 
    }); 
} 

注意，请求完成（成功和错误回调后执行）时complete被调用。由于您只需要为每个请求运行一次，因此您不应在此情况下使用它。

Answer 2

它看起来像一个范围问题。将您完整的（）的代码放到一个单独的函数，并从两者的成功称之为（）和错误（）：

function renderEvents(data) { 
    // Add events 
    for (var i = 0; i < data.length; i++){ 
     addEvent(data[i]); 
    } 
} 

function initEvents() { 
    $.ajax({ 
     url: '/Work/GetEvents/' + id, type: "GET", dataType: 'json', 
     success: function (data) { 
      renderEvents(data); 
     }, 
     error: function(data) { 
      // Note: hardcoded JSON event in here 
      renderEvents(hardcodedEvents); 
     } 
    }); 
} 

编辑：固定变量名renderEvents（）。