使用Jquery和ajax进行Twitter搜索

时间:2013-04-11 17:30:33

标签: ajax json

目前我的代码是:

<!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>

一切正常但是当它从个人资料图片网址收到代码时,它只显示网址而不是图片本身。如何才能显示配置文件图像而不仅仅是代码?

谢谢

1 个答案:

答案 0 :(得分: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 />');