Jquery는 JSON 호출의 데이터로 제목 속성을 추가합니다.

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

이제 위의 작품을 가지고 있지만 내가 원치 않는 경고에 추가하여 프로세스를 "중지"경우에만 것입니다 JSON 호출 (?)에서 데이터를 검색하기 전에 실행 중이며 경고를 통해이를 따라 잡을 수 있습니다.

JSON 호출 후에 실행되는 다른 함수가 필요하거나 코드가 'success'함수로 들어가는 것이 좋겠지 만,이 경우 'this'요소를 유지하는 방법을 모르겠습니다.

도움과 조언을 크게받습니다.

감사

크리스

Answer 1

는 AJAX 비동기 자바 스크립트를 의미 있음을 유의하십시오. 즉, 서버와의 통신이 진행되는 동안 브라우저가 응답하지 않을 것입니다. 당신이 $.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 콜백은 반환 된 데이터를 참조하며 each (반복되는 요소 일 것임)에 대해 this을 무시합니다. 실제로 성공 호출 내에서 다시 호출 할 수 있도록 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");       
    } 
    }); 
}); 

성공 콜백을 올바르게 사용해야합니다. 희망이 도움이됩니다.

콜백은 비동기 자바 스크립트에 사용되며, 그렇지 않으면 경쟁 조건 (보고 있던 내용)이 표시됩니다.

Answer 3

ajax 호출은 비동기식입니다. 즉, title을 설정하면 서버가 요청을 처리 중임을 의미합니다. 원하지 않는 경고를 입력하면 잠시 동안 클라이언트를 중지하고 서버가 요청에 응답하므로 그것이 작동합니다.

위에서 설명한대로 성공에 코드를 삽입하면 예상대로 작동합니다.

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