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对象加载正常然后它进入'完成：函数（数据）`并逐个添加事件。

但是，当我使用正确的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

看起来像范围问题。将您的complete（）代码移动到一个单独的函数中，并从success（）和error（）调用它：

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（）中的变量名称。

AJAX请求没有在js中呈现

2 个答案: