从 .ajax 调用返回 html

Question

当我尝试通过回调函数返回 html 时，由于某种原因，我变得未定义：

function getDataFromUrl(urlWithContent)
{  
    // jQuery async request
    $.ajax(
    {
        url: urlWithContent,
        dataType: "html",
        success: function(data) {
                                    return $('.result').html(data);
                                },
        error: function(e) 
        {
            alert('Error: ' + e);
        }
    });
}

我知道我正在取回数据，我在响应中的 firebug 中看到它，当我发出数据警报时，我看到整个页面内容出现在警报框中。

当我调用我的函数时，我正在执行以下操作：

var divContent = getDataFromUrl(dialogDiv.attr("href"));

if(divContent)
    dialogDiv.innerHTML = divContent;

当我提醒 divContent（在 if 语句之前）时，我变得不确定。也许我只是在返回数据的方式上犯了这个错误？

我也试过只返回数据；同样的事情，当设置为我的变量时，在调用此方法后我得到未定义。

根据回复更新：

试过了，还是不确定：

function getDataFromUrl(urlWithContent, divToUpdate)
{  
    $.ajax(
    {
        url: urlWithContent,
        aSync: false,
        dataType: "html",
        success: function(data) {
                                    divToUpdate.innerHTML = data;
                                },
        error: function(e) 
        {
            alert('Error: ' + e);
        }
    });
}

我在另一个函数中这样调用它：

var divContent = "";

if (dialogDiv.attr("href"))
{
    getDataFromUrl(dialogDiv.attr("href"), divContent);
}

Answer 1

您不能从回调中返回数据 - 因为无法保证在函数退出时数据已经从函数中返回（因为它是一个异步调用。）

你要做的是更新回调中的内容，比如：

success: function(data) {
    $('#dialogDiv').html(data);
},

您的对话框DIV 附加了id="dialogDiv"。

我认为您还可以修改函数以在调用完成时更新对象，如下所示：

function getDataFromUrl(urlWithContent, divToUpdate)
{  
    // jQuery async request
    $.ajax(
    {
        url: urlWithContent,
        dataType: "html",
        success: function(data) {
            divToUpdate.innerHTML = data;
        },
        error: function(e) 
        {
            alert('Error: ' + e);
        }
    });
}

然后像这样调用它（其中dialogDiv 是代表DIV 的对象，要像您的示例一样更新。）

getDataFromUrl(dialogDiv.attr("href"), dialogDiv);

Answer 2

ajax 调用异步运行。因此，您的函数在您的 ajax 调用完成之前返回（通过退出块的末尾）。你有两种方法来处理这个问题。添加 aSync: false 选项以强制 ajax 调用同步运行或使用回调到您的函数，该回调可以在 ajax 调用完成时执行。我更喜欢后者。

function setDataFromUrl(urlWithContent,callback) 
{   
    // jQuery async request 
    $.ajax( 
    { 
        url: urlWithContent, 
        dataType: "html", 
        success: function(data) { 
                                    callback(data);
                                }, 
        error: function(e)  
        { 
            alert('Error: ' + e); 
        } 
    }); 
}

setDataFromUrl(dialogAnchor.attr("href"), function(data) {
     dialogDiv.html(data);
});

甚至更好，除非您在很多地方共享此代码：

var dialogDiv = $('div.dialog');
var dialogAnchor = dialogDiv.find('a');
// jQuery async request 
$.ajax( 
{ 
    url: dialogAnchor.attr('href'), 
    dataType: "html", 
    success: function(data) { 
                                dialogDiv.html(data);
                            }, 
    error: function(e)  
    { 
        alert('Error: ' + e); 
    } 
});

Answer 3

你为什么不试试这个：

function getDataFromUrl(urlWithContent)
{  
    // jQuery async request
    $.ajax(
    {
        url: urlWithContent,
        dataType: "html",
        success: function(data) {
                                    $('#dialogDiv').html(data);
                                },
        error: function(e) 
        {
            alert('Error: ' + e);
        }
    });
}

并且只是调用函数而不将其分配给任何变量。

HTH