2Coders – блог web-разработчика

В этом посте, я хочу показать, как используя метод jQuery getJSON() получить данные из твиттера. Для работы с твиттером нам понадобится его API, а именно метод search. Подробнее о twitter API можно прочитать здесь.

Создадим кнопку и текстовое поле, в которое будем вводить запрос для поиска. Так же добавим контейнер, для вывода полученных результатов.

<input type="text" id="twitterQuery" /><button button id="twitterButton">Поиск</button>
<div id="results"></div>

Напишем JavaScript код.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url="http://search.twitter.com/search.json?lang=ru&rpp=10&callback=?&q=";
var query;
  $("#twitterButton").click(function(){
  $("#results").html('');
    query=$("#twitterQuery").val();
    $.getJSON(url+query,function(json){
      $.each(json.results,function(i,tweet){
         $("#results").append('<div><img class="imgTweet" width="48" height="48" src="'+tweet.profile_image_url+'"/>'+tweet.text+' <strong>From:</strong> <a href="http://twitter.com'+tweet.from_user+'">@'+tweet.from_user+'</a></div>');
      });
    });
  });
});
</script>

Давайте разбирем приведенный выше код. В переменной url содержится адрес для twitter API. В переменной lang мы задаем на каком языке будут искаться посты (по умолчанию английский). В rpp содержится количество выводимых постов. В query содержится наш запрос. Вот собственно и всё. Готовый вариант можно скачать здесь.

• Работа с JSON в PHP и jQuery
• Создаем индикатор сложности пароля
• Система оценок на jQuery и PHP
• jQuery: делаем формы интерактивными
• Выделение всех элементов checkbox с помощью jQuery

Теги: JavaScript, jQuery, Полезные скрипты