Проект: Бесконечная прокрутка и отправка формы через AJAX
Мы еще не связывали фронтенд с бэкендом, и в этом проекте вы создадите форму, отправляющую данные на существующий в сети Интернет API, а именно Open Movie Database (OMDB))(созданный после IMDB). Для начала прочтите документацию на OMDB, чтобы получить представление о том, как отправить на сайт данные.
Ваше задание
- Примечание: Отправка данных на OMDB недоступна, мы пытаемся найти решение. Поэтому пока переходите на Часть II, где рассматривается получение существующих данных.
Создайте форму, отправляющую новый фильм в базу данных сайта. Вы должны проверить, что название и прочие необходимые поля не пустые.
- Создайте репозиторий на Github для проекта. Если возникли сложности, посмотрите инструкции на этой странице.
- Создайте пустой документ HTML.
- Подумайте о том, как создать форму, и как она будет отправлять данные на API OMDB. Какие объекты и функции будут необходимы? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Нарисуйте схему на бумаге перед тем, как вообще садиться за компьютер.
- Создайте элементы формы, их стилизация не обязательна.
- Создайте логику валидации.
- Проверьте, что форма действительно отправляет фильм в базу.
- Создайте статус "загрузка...", который отображается во время выполнения AJAX запроса и исчезает по его окончании.
Часть II: Бесконечная прокрутка
- Теперь запросим несколько фильмов и отобразим их. Используя jQuery, удалите форму с вашей страницы и создайте другой запрос AJAX, который получает 10 фильмов из базы и отображает их на странице.
- Создайте бесконечный скролл, который загружает еще 10 фильмов и добавляет их к списку, чтобы вы их увидели при прокрутке страницы вниз. Статус "загрузка..." должен появляться, пока ваша программа ждет очередные 10 фильмов из базы.
- Потестируйте работу программы. Что нарушает работу прокрутки?
- Отправьте код на Github.
Решения студентов
- Решение 1 | Посмотреть в браузере
- Решение 2 | Посмотреть в браузере
- Решение 3 | Посмотреть в браузере
- Решение 4 | Посмотреть в браузере
- Решение 5 | Посмотреть в браузере
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему