Question

我正在创建一个“webapp”，您可以点击不同的艺术家，然后生成一个艺术家页面。我显示一个图像，生物，...我从收音机api得到所有这些信息。现在我也可以获得包含facebook网址的“facebook_url”，这让我想要显示他/她的脸书页面上的所有专辑封面。我被困在这里。

我有这个工作代码:( #albums是一个基本的div）

    function doFacebookRequest(){
    $.ajax({
        url: oSingle.artist.facebook_url+"/albums",     
        dataType: "jsonp",
        success: function(json){
            console.log(json);
            $("#albums").empty();
            for(index in json.data) {
                var album = json.data[index];
                var img = $("<img/>")
                    .attr("src", "http://graph.facebook.com/" + album.id + "/picture");
                var a = $("<a/>")
                    .attr("href", album.link)
                    .append(img)
                    .appendTo("#albums");
            }   
        }
    });
}

现在我想将它放在我附加到我的主要内容的div标签中（如下所示：）

                    $("<div/>")
                    .html(doFacebookRequest)
                    .appendTo(contentdiv);

以上显然是错误的，但我不知道如何在附加的代码中正确地创建该函数。

我需要这样做，因为我的所有代码都采用这种附加格式，例如：

                    $("<img/>")
                    .addClass("artistimg")
                    .attr("src", "http://images.q-music.be/" + oSingle.artist.photo)
                    .appendTo(contentdiv);

                $("<h1/>")
                    .text(oSingle.artist.name)
                    .appendTo(contentdiv);

等。

Answer 1

jQuery的html函数可以接受你问题中的函数，但会将html设置为函数返回的函数。在您的示例中，该函数不返回任何内容，因此您的DIV中不会设置任何内容。

此外，AJAX调用是异步的，因此您当前的模式将无法有效工作，因为它必须阻止执行并等待Facebook响应。这通常是一个坏主意，你的模式加强了。使用回调方法的东西会更有效。

那就是说，你应该能够通过强制AJAX请求同步并返回HTML来获得你想要的东西。为此，请在ajax调用中将async设置为false。这将导致请求同步执行。接下来，在ajax函数调用之前创建一个任意DIV。将内容添加到任意DIV。在ajax函数调用完成后，返回任意DIV的HTML内容。

以下内容应该能满足您的需求：

function doFacebookRequest(){
    var content = $('<div/>');
    $.ajax({
        url: oSingle.artist.facebook_url+"/albums",
        dataType: "jsonp",
        async: false,
        success: function(json){
            console.log(json);
            for(index in json.data) {
                var album = json.data[index];
                var img = $("<img/>")
                    .attr("src", "http://graph.facebook.com/" + album.id + "/picture");
                var a = $("<a/>")
                    .attr("href", album.link)
                    .append(img);
                content.append(a);
            }   
        }
    });
    return content.html();
}

结合现有代码中的函数

1 个答案: