1

我正在尝试使用从 JSON 调用中获得的值动态地将标题添加到许多图像中。

这是我到目前为止所拥有的

$(".watch_view img").each(function() {
$.ajax({
    url: 'http://gdata.youtube.com/feeds/api/videos/T2aMBeeM4yw?v=2&alt=jsonc',
    dataType: 'json',
    success: function(json) {   
    song_title = json.data.title;// song title is retrieved without issue                           
    }   
    });

   alert(song_title); //this to be removed
   //the title attr below is only added when the above alert is in place    
   $(this).attr('title', song_title);
   $(this).attr('alt', "This works everytime"); 
   });

现在上述方法有效,但只有当我通过添加不需要的警报“停止”该过程时 - 我只能猜测代码在从 JSON 调用(?)检索数据之前正在执行,并且警报使其能够赶上.

我想我需要另一个在 JSON 调用之后执行的函数,或者让代码进入“成功”函数,但如果是这种情况,我不确定如何保持“this”元素。

非常感谢帮助和建议。

谢谢

克里斯

4

4 回答 4

1

请记住,AJAX 代表异步 JavaScript。这意味着在与服务器进行通信时,浏览器不会无响应。

当您调用$.ajax(...)函数时,脚本会在它之后继续,而不是等待响应(您可以将其配置为等待,但这将是一个同步调用)。

当服务器成功返回时,您应该响应该事件,因此,您的响应处理代码必须在success函数体中:

$(".watch_view img").each(function (index,element) {
    $.ajax({
        url: 'http://gdata.youtube.com/feeds/api/videos/T2aMBeeM4yw?v=2&alt=jsonc',
        dataType: 'json',
        success: function (json) {
            song_title = json.data.title; // song title is retrieved without issue                           
            $(element).attr('title', song_title);
            $(element).attr('alt', "This works everytime");
        }
    });

});

在您的旧代码中,警报在服务器返回之前到达。当您放置断点时,它起作用了,因为在您进行人工处理时,服务器有足够的时间返回答案:)

更新

此外,您应该知道,回调this内部success指的是返回的数据,覆盖了预期thiseach(这将是迭代的元素)。您必须实际声明each调用的参数,以便您可以在成功调用中引用它们。

于 2012-10-16T18:29:34.410 回答
0
$(".watch_view img").each(function() {
$.ajax({
    url: 'http://gdata.youtube.com/feeds/api/videos/T2aMBeeM4yw?v=2&alt=jsonc',
    dataType: 'json',
    success: function(json) {   
        song_title = json.data.title;// song title is retrieved without issue 

       $(this).attr('title', song_title);
       $(this).attr('alt', "This works everytime");                           
    }   
    });
});

您需要正确使用成功回调。希望有帮助。

回调用于异步 javascript,否则你会得到竞争条件(你所看到的)。

于 2012-10-16T18:30:39.923 回答
0

ajax 调用是异步的,这意味着当您设置标题时,服务器仍在处理您的请求。当您发出不需要的警报时,您会停止客户端一段时间,然后服务器会响应请求,这就是它起作用的原因。

如果你把代码放到success里,如上所述,它会按预期工作。

于 2012-10-16T18:34:47.177 回答
0

你可以试试这个

var _song_title = ''
$(".watch_view img").each(function() {    
$.ajax({
    url: 'http://gdata.youtube.com/feeds/api/videos/T2aMBeeM4yw?v=2&alt=jsonc',
    dataType: 'json',
    success: function(json) {   
    _song_title = json.data.title;// song title is retrieved without issue                           
    }   
    }).done(function(){
        alert(_song_title); //this to be removed
   //the title attr below is only added when the above alert is in place    
   $(this).attr('title', _song_title);
   $(this).attr('alt', "This works everytime");
    });
于 2012-10-16T18:46:26.037 回答