Question

我尝试使用从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"); 
   });

现在上述工作，但只有当我＆＃34;停止＆＃34;通过添加不需要的警报来进程 - 我只能猜测代码在从JSON调用（？）中检索数据之前正在执行，并且警报使其能够赶上。

我想我需要在JSON调用之后执行的另一个函数或者代码才能进入成功状态＆＃39;功能，但我不知道如何保持这个＆＃39;这个＆＃39;如果是这样的话。

非常感谢帮助和建议。

由于

克里斯

Answer 1

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

当您调用$.ajax(...)函数时，脚本会在其后继续，而不是等待响应（您可以将其配置为等待，但这将是同步调用）。< / p>

当服务器成功返回时，您应该响应该事件，因此，您的响应处理代码必须位于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调用的参数，以便您可以在成功调用中引用它们。

Answer 2

$(".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，否则你会遇到竞争条件（你所看到的）。

Answer 3

ajax调用是异步的，这意味着当您设置标题时，服务器仍在处理您的请求。当您放置不需要的警报时，您停止客户端一段时间，服务器回答请求，这就是它工作的原因。

如果您将代码置于成功之中，如上所述，它将按预期工作。

Answer 4

你可以尝试这个

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");
    });

Jquery使用来自JSON调用的数据添加title属性

4 个答案: