从.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); 
    } 
});