2012-10-18 172 views
3

我有一个基本的函数,我试图从bit.ly返回一个缩短的url。我的用户名和api_key刚刚被删除了这篇文章,但他们已经过测试,我得到了他们的正确答案。我们也检查过了,我们正在用正确的数据创建JSON响应。bitly函数返回undefined

我遇到的问题是我想要这个功能是我们可以在网站上的不同点上调用以缩短将包含在Tweet部分中的链接。所以这个想法只是编写一个我们可以及时调用的函数,因为我们明确知道某些东西会被推出,并且需要动态调用页面的url。

当url传递给函数时,我们得到未定义的返回值。这里的功能:

var UrltoShorten = 'http://google.com', 
     bitly = shortenUrl(UrltoShorten); 

    function shortenUrl(longUrl) { 

     var username = 'removed', 
      key = 'removed'; 

     $.ajax({ 
      url: 'http://api.bit.ly/v3/shorten', 
      data: { 
       longUrl: longUrl, 
       apiKey: key, 
       login: username 
      }, 
      dataType: 'jsonp', 
      success: function (v) { 
       var shortUrl = v.data.url; 
       return shortUrl; 
       //console.log(shortUrl); // Will return shorten Url 
      } 
     }); 
    } 

console.log(bitly); // Returns undefined 

在我们的测试中,我们已经发现,console.logging成功函数内的值返回每次缩短的URL。 Console.logging shortenUrl函数外部的值每次都返回undefined。

是否有一个原因,我们无法获得正确的值的功能?

+5

AJAX是异步的。 – jbabey

+0

您将最终在函数外部获得正确的值,但只有在HTTP请求完成并调用了“成功”函数之后才能获得正确的值。 – Pointy

回答

4

ajax调用是异步的,这意味着程序不会像您期望的那样逐行进行。 ajax调用之外的JavaScript将继续运行,然后当ajax调用在后台完成时,控件将跳转回成功/错误回调。

简短回答:任何你想处理ajax调用的数据都必须在该调用的成功处理程序中。

如果出于某种原因想要停止一切,直到ajax调用完成,然后通过ajax选项async: false。这会冻结浏览器,直到ajax调用完成。使用

+0

只是为了测试我设置异步:假,它仍然返回未定义。 – erik

2

集AJAX SYNCHRON:

$.ajax({ 
    async:false, 
    ... 
})