2016-11-14 69 views
0

嗨,我正在與Ajax和XML工作,並試圖與flickr應用程序工作flickr事情是,要獲取XML文檔中的特定元素,我這樣做這樣做var title = dataInfo.getElementsByTagName('title')[0]; 我需要得到的照片的標題我從Flickr得到的,當我做到這一點爲什麼我得到[object element]?

$('#results').append("<img src ="+src+" width="+width+" height="+height+">"+title); 

我的頭銜是[object element],爲什麼它不顯示HTML類似標題?

這裏是全碼:(basicly我有3個Ajax請求(第一次獲得了一些照片中,第二次獲得基於我的HTML按鈕的大小,三是照片信息):

$(document).ready(function() { 
    var numero = 10; 
    var clicked = 1; 

    $("#sq").click(function(){ 
     clicked = 1; 
    }); 
    $("#lg-sq").click(function(){ 
     clicked = 2; 
    }); 
    $("#thumb").click(function(){ 
     clicked = 3; 
    }); 
    $("#small").click(function(){ 
     clicked = 4; 
    }); 
    $("#mid").click(function(){ 
     clicked = 5; 
    }); 

    $("#apagar").click(function() { 
     $("#results").html(''); 
    }); 

    $('#pesquisar').click(function() { 
     $("#results").html(''); 
     $.ajax({ 
      url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search', 
      dataType: 'xml', 
      data: { 
       api_key: '2fd41b49fedfd589dc265350521ab539', 
       tags: $("#tag").val(), 
       format: 'rest' 
      }, 
      success: sucessHandler, 
      error: errorHandler 

     }); 

     function sucessHandler(data) { 
      $("#results").html(''); 
      var fotos = Array.prototype.slice.call($(data).find("photo")); 

      if ($("#numero").val() != "") { 
       numero = parseInt($("#numero").val()); 
       console.log("entrou"); 
      } 

      fotos.forEach(function(foto,key) { 
       if(key < numero){ 
       $.ajax({ 
        url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getSizes', 
        dataType: 'xml', 
        data: { 
         api_key: '2fd41b49fedfd589dc265350521ab539', 
         photo_id: $(foto).attr('id'), 
         format: 'rest' 
        }, 
        success: function(dataSize){ 
         var farmId = $(foto).attr('farm'); 
         var serverId= $(foto).attr('server'); 
         var Id = $(foto).attr('id'); 
         var secret = $(foto).attr('secret'); 
         var src = "https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + Id + "_"+secret+".jpg"; 

          $.ajax({ 
          url: 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo', 
          dataType: 'xml', 
          data: { 
           api_key: '2fd41b49fedfd589dc265350521ab539', 
           photo_id: $(foto).attr('id'), 
           format: 'rest', 
           secret: secret 
          }, 
          success: function(dataInfo){ 
           if(clicked == 1){ 
           var size = dataSize.getElementsByTagName('size')[0]; 
           var title = dataInfo.getElementsByTagName('title')[0]; 
           console.log(title); 
           var width = $(size).attr("width"); 
           var height = $(size).attr("height"); 
           $('#results').append("<img src ="+src+" width="+width+" height="+height+">"+title); 

         } 

         if(clicked == 2){ 
          var size = dataSize.getElementsByTagName('size')[1]; 
          var width = $(size).attr("width"); 
          var height = $(size).attr("height"); 
           $('#results').append("<img src ="+src+" width="+width+" height="+height+">"); 
         } 


         if(clicked == 3){ 
          var size = dataSize.getElementsByTagName('size')[2] 
          var width = $(size).attr("width"); 
          var height = $(size).attr("height"); 
           $('#results').append("<img src ="+src+" width="+width+" height="+height+">"); 
         } 

         if(clicked == 4){ 
          var size = dataSize.getElementsByTagName('size')[3] 
          var width = $(size).attr("width"); 
          var height = $(size).attr("height"); 
           $('#results').append("<img src ="+src+" width="+width+" height="+height+">"); 
         } 

         if(clicked == 5){ 
          var size = dataSize.getElementsByTagName('size')[4] 
          var width = $(size).attr("width"); 
          var height = $(size).attr("height"); 
           $('#results').append("<img src ="+src+" width="+width+" height="+height+">"); 
         } 
          }, 
          error: function(req,status,err){ 

          } 
          }); 

        }, 
        error: errorSize 

       }); 
       } 
      }); 

       function errorSize(req, status, err) { 
        console.log("error size"); 
       } 

     } 

     function errorHandler(req, status, err) { 
      console.log("fail"); 
     } 
    }); 
}); 

相關部分:

if(clicked == 1){ 
    var size = dataSize.getElementsByTagName('size')[0]; 
    var title = dataInfo.getElementsByTagName('title')[0]; 
    console.log(title); 
    var width = $(size).attr("width"); 
    var height = $(size).attr("height"); 
    $('#results').append("<img src ="+src+" width="+width+"  height="+height+">"+title); 
+4

這是因爲你添加了DOMElement而不是字符串。假設你想訪問元素的屬性,例如'var title = dataInfo.getElementsByTagName('title')[0] .innerText;' –

+0

@RoryMcCrossan'innerText'是非標準的。改爲使用'textContent'。 –

+0

還要注意,你可以使用'clicked'變量通過索引來訪問'size'元素,而不是使用N個重複的'if'語句來大規模幹掉你的代碼 –

回答

0

你有沒有嘗試使用以下

var title = dataInfo.getElementsByTagName('title')[0].innerText;

這將爲您提供元素的文本,而不是爲您提供對象本身。

+0

'innerText'是非標準的。改爲使用'textContent'。 –

+0

有沒有辦法讓標題直接傳給dom? – caxinaswin