0

我想从中接收 HTML 代码，chat.openChat()但chat.getHtmlPage()返回操作是“未定义的”。

var chat = {
    openChat : function($url){
        $('#popup').html(chat.getHtmlPage($url)); // It's wrong, UNDEFINED.
    },

    getHtmlPage : function($url){
        $.ajax({
            url: $url
        }).done(function($html) { 
            return $html; // It's OK! $html is with correct html, see with alert().
        });
    }
}

$(document).ready(function(){
    $('.btnChat').click(function(){
        chat.openChat($(this).attr('href')); // It's OK!
        ...
        return false;
    });
});
4

5 回答 5

4

默认情况下，AJAX 请求是异步的，因此它会在您从getHtmlPage. 即使您将其更改为同步，您仍然会有 undefined in openChat，因为您从done处理程序返回值，而不是从getHtmlPage。

您应该为方法提供回调getHtmlPage。例子：

var chat = {
    openChat : function($url){
        chat.getHtmlPage($url, function(html) {
            $('#popup').html(html); 
        });
    },
    getHtmlPage : function($url, callback){
        $.ajax({
            url: $url
        }).done(callback);
    }
}
于 2012-11-20T11:46:58.400 回答
3

Ajax 调用是异步的，这就是为什么您不能立即使用 ajax 函数的返回。将结果存储在 $('popup') 中。

你将不得不做这样的事情：

openChat : function($url){

    chat.getHtmlPage($url));
},

setHtmlPage : function ($html) {
    $('popup').html($html);
},


getHtmlPage : function($url){

    $.ajax({
        url: $url
    }).done(function($html) { 
        chat.setHtmlPage($html);
    });
}

您可能还想查看有关 ajax 的 jquery 文档。有一种方法可以同步发出 ajax 请求，但这会阻止您的浏览器，并且在较新的版本中已弃用。（毕竟它不是真正的ajax）

检查关于异步的部分

于 2012-11-20T11:46:27.220 回答
2

它应该是这样的：

var chat = {
    openChat : function($url){
        chat.getHtmlPage($url);
    },

    getHtmlPage : function($url){
        $.ajax({
            url: $url
        }).done(function($html) { 
            $('#popup').html($html); 
        });
    }
}

$(document).ready(function(){
    $('.btnChat').click(function(){
        chat.openChat($(this).attr('href')); // It's OK!
        ...
        return false;
    });
});

AJAX 是异步的。调用它后，脚本执行将转到下一行，并.done在请求完成后稍后调用。此外，从 done 中返回也不会执行任何操作。因为它是请求完成后触发的 jquery ajax 事件。并且 jquery 不会将返回值传递给上层代码，即使你让它以同步方式工作。

于 2012-11-20T11:45:50.397 回答
0

AJAX 中的第一个“A”是“异步”，这意味着：在调用 .done() 时，您的其余代码已经开始执行。有了这些知识，returnin .done() 就没有任何意义了。
相反，我们只是停用 AJAX 的异步行为，async: false在 .ajax-object 中设置。但请注意，这不是 AJAX 的初衷，它可能会在某些浏览器中引起问题。

然后，一个解决方案是将 设置return为您的getHtmlPage（除了将 async 设置为 false ！）：

getHtmlPage : function($url){

    //a new variable to store the ajax-result
    //defining it here, so it's only visible within the scope of getHtmlPage
    var html;

    $.ajax({
        url: $url,
        async: false
    }).done(function($html) {
        //we use the html variable here to store the result 
        html = $html;
    });

    //finally returning the variable
    return html;
}

这样，在 ajax 调用完成之前，您的 return 语句不会被执行。

于 2012-11-20T11:57:12.830 回答
0

解决方案

做一个通用功能（最初的想法）。

var chat = {

    openChat : function($url, $htmlElement){

        chat.setHtmlPage($url, $htmlElement);
    },


    setHtmlPage : function($url, $htmlElement){

        $.ajax({
            url: $url
        }).done(function($html) { 
            $($htmlElement).html($html);
        });
    }

}

$(document).ready(function(){

    $('.btnChat').click(function(){

        chat.openChat($(this).attr('href'), '#popup');

        ...

        return false;
    });

});
于 2012-11-20T11:58:35.350 回答