Вы очарованы динамических данных?Вы идете от зависти, когда вы видите заметки в социальных сетях вытащил магически на веб-сайтах?Поверьте мне, я был there.
Цель урока сегодня в том, чтобы создать простой веб-приложение для захвата фильмов плакаты из TMDb.Мы будем использовать JQuery и пользовательского ввода запроса JSON на основе API и дело с возвращаемым данным appropriately.
Я надеюсь убедить вас, что API-интерфейсы не страшно, и что большую часть времени они могут быть лучшими friend.
API-интерфейсы являются будущим Но, что более важно, Present
JSON на основе API-интерфейсы являются горячие собственности в Интернете прямо сейчас.Я не могу вспомнить последний раз, когда я зашел на блог или портфеле, не видя твитов владельца или Facebook друзья смотрели на меня.Это интерактивность делает веб захватывающее место.Единственное ограничение, кажется, воображение людей.Как показала все, от вытащил заметки в социальных сетях, чтобы самосознанием обмен-курсы API, данные в настоящее время король, и веб-сайты замены его freely.
Разработчики позволяют нам добраться до своих данных гораздо более открыто сейчас, больше не является все под замком.Сайты гордимся тем, что вы доступ к своим данным и, по сути, поощрять его.Сайты, такие как TMDb и LastFM позволяют создавать совершенно отдельных приложений, основанных на данных, которые они потратили годы накапливается.Эта открытость и восприимчивость являются содействие переплетаются сети пользователей и соответствующие им actions.
Эта статья предназначена для людей, которые компетентны в HTML и CSS и иметь базовые знания о Jquery методы.Мы не будем копаться глубоко в передовые технологии JavaScript, а будут помогать новичку, который хочет создать более сложные веб-tools.
API, в Nutshell
В основных терминов, API позволяет получить доступ к данным веб-сайта, не вдаваясь вблизи своих баз данных.Это дает нам удобный способ чтения и записи данных с веб-сайта databases.
? Конечно, здорово, но что код мне нужно
Как и многие разработчики, я весело подпрыгивать между фоновым и фронтального развития, и я так счастлив, работающих в PHP, как и в JQuery.Это просто зависит от того, шляпу я ношу, что day.
. Потому что эта статья в основном о JQuery на основе JSON API клиентов, мы сосредоточимся на клиентском коде (например, JQuery)
При работе с API, и вооруженные JQuery, из них более вероятно, столкнутся JSON.
Игрок 1: JSON
JSON (или JavaScript Object Notation) представляет собой легкий, простой и популярный способобмен данными.JQuery это не единственный инструмент для управления и взаимодействия с JSON, это просто мое и многих других предпочтительных method.
Много услуг, которые мы используем каждый день есть JSON на основе API: Twitter, Facebook и Flickr все отправки данных в JSON format.
Ответ JSON с API выглядит следующим образом:
([{"score":
null,"popularity":
3,"translated":true,"adult":
false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"I Goonies",
"movie_type":"movie","id":9340,"imdb_id":"tt0089218",
"url":"http://www.themoviedb.org/movie/9340",
"votes":16,"rating":9.2,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his father's attic.
Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux runs off on a big quest
to find the secret stash of the pirate One-Eyed Willie.","released":"1985-06-07",
"posters":[{"image":{"type":"poster","size":"original","height":1500,"width":1000,
"url":"http://cf1.imgobject.com/posters/76b/4d406d767b9aa15bb500276b/the-goonies-original.jpg",
"id":"4d406d767b9aa15bb500276b"}}],"backdrops":[{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,
"url":"http://cf1.imgobject.com/backdrops/242/4d690e167b9aa13631001242/the-goonies-original.jpg",
"id":"4d690e167b9aa13631001242"}}],"version":3174,"last_modified_at":"2011-09-12 13:19:05"}])
Немного беспорядок, верно?Сравните это с той же JSON посмотреть в консоли разработчика в Google Chrome:
Ответ JSON доступны через JQuery функция, позволяющая управлять, просматривать и, что более важно, его стиль, однако, мы want.
2 игрока: jQuery
Лично я выбрал бы более JQuery JavaScript в любой день недели.Jquery делает вещи намного проще для начинающих веб-разработчиков, кто просто хочет материала, чтобы работать с места в карьер.Я использую его каждый день.Если бы я должен был выполнить те же задачи с использованием собственных Javascript, моя производительность будет молоть прямо вниз.На мой взгляд, JavaScript для людей, которые хотят более глубокое понимание языка сценариев и DOM себя.Но для простоты и удобства использования, JQuery, где это at.
В сущности, JQuery это библиотека JavaScript, с удобными функциями, как getJSON.Данная функция будет клей, который скрепляет наши API клиента together.
Цель: JQuery на основе JSON API Client
Я недавно представленный Событие Apart Веб-приложение, которое мы собираемся пройти сейчас.Это называется Передняя Row.
Идея веб-приложение взять название фильма, введенные пользователем, запустить его через TMDb ‘с API и возвращает соответствующий сайт.После этого пользователь может поделиться им или сохранить его на свой computer.
Веб-приложение разделено на HTML, CSS и JQuery.Мы сосредоточимся на JQuery, потому что там волшебный happens.
HTML
Ниже приведена основная структура веб-приложения.Ничего особенного here.
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Ben Howdle and Dan Matthew">
<meta name="description" content="A responsive movie poster grabber">
<title>Front Row by Ben Howdle</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<!--jQuery, linked from a CDN-->
<script src="scripts.js"></script>
<script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>
<h1>Front Row</h1>
</header>
<section id="fetch">
<input type="text" placeholder="Enter a movie title" id="term" />
<button id="search">Find me a poster</button>
</section>
<section id="poster">
</section>
<footer>
<p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
</footer>
</div>
</body>
</html>
Все у нас это немного Twitter баловство, поле ввода и кнопку представления.! Урон
CSS, немного не по теме этой статьи, поэтому я оставлю его вам, чтобы осмотреть элементы, представляющие интерес на живой website.
JQuery
$(document).ready(function(){
//This is to remove the validation message if no poster image is present
$('#term').focus(function(){
var full = $("#poster").has("img").length ? true : false;
if(full == false){
$('#poster').empty();
}
});
Мне нравится проверки сообщения исчезают, когда пользователь начинает повторный ввод в поле ввода.Приведенный ниже сценарий проверяет, является ли изображение присутствует (то есть постер фильма), а если нет, впадает в контейнер сообщения о проверке один раз завоевания поле ввода focus.
//function definition
var getPoster = function(){
//Grab the movie title and store it in a variable
var film = $('#term').val();
//Check if the user has entered anything
if(film == ''){
//If the input field was empty, display a message
$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");
Причина, почему мы храним основной код, который извлекает данные в функцию, станет ясно позже (в основном, это для DRY programming).
Затем мы сохраняем значение входного в переменной, так что, когда мы используем его снова в коде Jquery не нужно повторное сканирование DOM.
Основные выполняется проверка на входе, проверяя, что что-то на самом деле был введен в field.
В попытке пошутить с моей стороны, я на дисплее появится сообщение, предупреждающее пользователя, что они не ввели ничего и просят их пожалуйста so.
} else {
//They must have entered a value, carry on with API call, first display a loading message to notify the user of activity
$('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");
Если на входе содержит значение, мы затем обработать запрос пользователя.Другой отображается сообщение, позволяя пользователю знать, что что-то happening.
$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
//TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information
if (json != "Nothing found."){
//Display the poster and a m ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров