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指的是返回的数据，覆盖了预期this的each（这将是迭代的元素）。您必须实际声明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 回答