如何显示Bitly API调用的短URL?

时间:2013-06-10 15:59:55

标签: javascript jquery json api

我正在尝试向网址添加查询字符串,对其进行编码,然后使用Bitly API缩短它( http://dev.bitly.com/api.html )。

前两个步骤运行良好,我已设法使用API​​将URL发送到Bitly,但无法显示短URL;我所看到的只是[object Object]

我知道API调用已成功,因为当我登录到我的Bitly帐户时,我可以看到我的历史记录中的位标,所以问题必须在于我的代码,我确信它很简单,但遗憾的是它超出了我的范围。

$('#shorten').click(function () {
        $encodedTrackedURL = encodeURIComponent($trackedURL);
        $bitly = $.getJSON('https://api-ssl.bitly.com/v3/shorten?access_token=' + $accessToken + '&longUrl=' + $encodedTrackedURL + '&format=json');
        $('#displayURL').text($bitly);
    });

我已将完整代码放到jsfiddle: http://jsfiddle.net/gstubbenhagen/EnNq3/15/

P.S。 OAuth访问令牌存储在变量$accessToken中,但由于显而易见的原因被删除。

1 个答案:

答案 0 :(得分:2)

问题是您没有正确使用$.getJSON。由于这是异步调用,因此字符串不会同步存储在变量中。相反,您需要在回调函数中进行后续工作。

$('#shorten').click(function () {
    $encodedTrackedURL = encodeURIComponent($trackedURL);
    var params = {
        access_token: $accessToken,
        longUrl: $encodedTrackedURL,
        format: 'json'
    };

    $.getJSON('https://api-ssl.bitly.com/v3/shorten', params, function (response, status_txt) {
        $('#displayURL').text(status_txt + ' ' + response.data.url);
    });
});

此外,您还需要仔细查看documentation for /v3/shorten以正确理解返回值。请注意,它实际上返回一个JSON对象,url值是短URL。您还可以指定format: 'txt'并获取短URL(以字符串形式)作为整个响应。

编辑:我误解了API文档。看起来响应对象包含外层的元数据(例如bit.ly状态文本,与HTTP响应文本不同),然后内部data对象应包含实际数据。由于缺少访问令牌,我无法使其工作,但请继续尝试以上操作。 (Updated JSFiddle