Loading JSON content via Ajax

Loading JSON content via Ajax

http://icant.co.uk/articles/things-to-know-about-ajax/load-json.html

Example

Source Code

JavaScript
$(document).ready(function(){
  var container = $('#target');
  container.attr('tabIndex','-1');
  $('.ajaxtrigger').click(function(){
    var trigger = $(this);
    var url = trigger.attr('href');
    container.html('');
    if(!trigger.hasClass('loaded')){
      trigger.append('<span></span>');
      trigger.addClass('loaded');
      var msg = trigger.find('span::last');
    } else {
      var msg = trigger.find('span::last');
    }
    doAjax(url,msg,container);
    return false;
  });
 
  function doAjax(url,msg,container){
    var tag = url.split('/');
    var tag = tag[tag.length-1];
    $.getJSON("http://api.flickr.com/services/feeds/"+
               "photos_public.gne?tags="+tag+
               "&tagmode=any&format=json&jsoncallback=?",
     function(data){
       msg.html(' (ready.)');
       $.each(data.items, function(i,item){
         $("<img/>").
          attr("src", item.media.m).
            attr("alt",item.title).
              appendTo(container);
         if ( i == 3 ) return false;
       });
       container.focus().effect("highlight",{},1000);
    });
  }
});

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s