2013-04-11 88 views
0

目前我的代碼是:Twitter搜索與jQuery和Ajax

<!DOCTYPE html> 
<head> 

    <title>Search Tweets</title> 
<style type = "text/css"> 

#tweets{ 
    border: 1px solid red; 
    text-align: center; 
    font-family: cursive; 
} 
#box{ 
    float: left; 
    margin-left: auto; 
    margin-right: auto; 

} 
#btn{ 
    margin-left: auto; 
    margin-right: auto; 
} 
#main{ 
    padding-bottom: 20px; 
} 




</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 

$(document).ready(function() { 
    $('#submit').click(function() { 
     var params = { 
      q: $('#query').val(), 
      rpp: 10 
     }; 
     searchTwitter(params); 
    }); 

function searchTwitter(query) { 
    $.ajax({ 
     url: 'http://search.twitter.com/search.json?' + jQuery.param(query), 
     dataType: 'jsonp', 
     success: function(data) { 
      var tweets = $('#tweets'); 
      tweets.html(''); 
      for (res in data['results']) { 
       tweets.append('<div>' + data['results'][res]['profile_image_url'] + data['results'][res]['from_user'] + ' Said: <p>' + data['results'][res]['text'] + '</p></div><br />'); 

      } 
     } 
    }); 
    } 
}); 


</script> 

</head> 
<body> 
<div id ="main"> 
    <div id ="box"> 
     <input id="query" type="text" value="" /> 
    </div> 
    <div id ="btn"> 
     <input id="submit" type="button" value="Search" /> 
    </div> 

</div> 
    <div id="tweets">Tweets 

    </div> 
</body> 

</html> 

一切正常但是當它臨危從資料圖片網址它只顯示網址,而不是圖像本身的代碼。我如何讓配置文件圖像顯示而不是隻顯示代碼?

謝謝

+0

這是要停止現在工作的任何時間。這是Twitter的API v1.0的一部分,它已被棄用。他們正在逐一關閉它。您需要切換到API 1.1。 – 2013-04-11 19:51:35

回答

1

只是包裝的圖片網址img標籤

tweets.append('<div><img src="' + data['results'][res]['profile_image_url'] +'">' + data['results'][res]['from_user'] + ' Said: <p>' + data['results'][res]['text'] + '</p></div><br />'); 
+0

哇,我不相信我忽略了這一點。非常感謝! – user2158890 2013-04-11 17:41:50