Question

我正在使用D3.js与Facebook PHP SDK一起显示访问者朋友。每个朋友都会显示在一个带有姓名和个人资料照片的小div中。

我的问题是Facebook API没有返回到个人资料图片的直接链接。相反，您必须使用https://graph.facebook.com/UserID/picture?redirect=false之类的网址，并以JSON格式返回图片的网址。所有其他朋友数据已经被提取并存储在Javascript数组中。

现在，我设置了一个AJAX调用来处理这个问题，但由于它的异步特性，它不起作用。获取图片网址后，DOM已加载，图片获得<img src="undefined">。

来自main.js

function ajax(path) {
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: {'path': path},
    success: function(data) {
        return data; //returned data is correct
    }
  })
}

// d3 code
profile.append("img")
  .attr("src", function(d) { return ajax(d.id); }) //this is "undefined"
  .attr("class", "thumb");

来自ajax.php

$path = file_get_contents('https://graph.facebook.com/' . $_GET['path'] . '/picture?redirect=false');
echo json_decode($path)->data->url;

Answer 1

Ajax是异步的，当请求完成时会调用回调，请尝试这样做：

function ajax(path, profile) {
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: {'path': path},
    success: function(data) {
        profile.append($('<img/>', {src: data, 'class': 'thumb'));
    }
  })
}

//d3
ajax(d.id, profile);

Answer 2

您获得<imge src="undefined"因为ajax没有返回任何内容。将代码更改为：

function ajax(path, callback) {
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: {'path': path},
    success: function(data) {
        callback(data);
    }
  })
}

和

var img = profile.append("img").attr("class", "thumb");
ajax(d.id, function(data) { img.attr("src", data); });

异步ajax调用混乱图像源

2 个答案: