我有一个基本功能,我试图从bit.ly返回一个缩短的url。我的用户名和api_key刚刚被删除了,但是他们已经过测试,我得到了正确的回复。我们还检查过,我们正在使用正确的数据进行JSON响应。
我遇到的问题是我希望这个功能能够在网站的不同位置调用,以缩短将包含在Tweet中的链接。所以我的想法就是编写一个我们可以及时调用的函数,因为我们特别知道某些内容是从Twitter发送的,需要动态调用页面的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。
我们是否有理由无法获得函数的正确值?
答案 0 :(得分:4)
ajax调用是异步的,这意味着程序不会像你期望的那样逐行流动。 ajax调用之外的javascript将继续运行,然后当ajax调用在后台完成时,控件将跳回到成功/错误回调。
简短回答:您想要对来自ajax调用的数据执行的操作必须位于该调用的成功处理程序中。
如果由于某种原因,你希望在ajax调用完成之前暂停所有内容,那么将ajax传递给async: false
选项。这将冻结浏览器,直到ajax调用完成。
答案 1 :(得分:2)
使用以下方式设置ajax synchron:
$.ajax({
async:false,
...
})