0

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

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

现在，我设置了一个 AJAX 调用来处理这个问题，但由于它的异步性质，它不起作用。获取图片 URL 后，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;
4

2 回答 2

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);
于 2013-09-04T01:25:38.940 回答
1

你得到<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); });
于 2013-09-04T01:27:40.027 回答