Проект: Бесконечная прокрутка и отправка формы через AJAX

Мы еще не связывали фронтенд с бэкендом, и в этом проекте вы создадите форму, отправляющую данные на существующий в сети Интернет API, а именно Open Movie Database (OMDB))(созданный после IMDB). Для начала прочтите документацию на OMDB, чтобы получить представление о том, как отправить на сайт данные.

Ваше задание

  • Примечание: Отправка данных на OMDB недоступна, мы пытаемся найти решение. Поэтому пока переходите на Часть II, где рассматривается получение существующих данных.

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

  1. Создайте репозиторий на Github для проекта. Если возникли сложности, посмотрите инструкции на этой странице.
  2. Создайте пустой документ HTML.
  3. Подумайте о том, как создать форму, и как она будет отправлять данные на API OMDB. Какие объекты и функции будут необходимы? Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Нарисуйте схему на бумаге перед тем, как вообще садиться за компьютер.
  4. Создайте элементы формы, их стилизация не обязательна.
  5. Создайте логику валидации.
  6. Проверьте, что форма действительно отправляет фильм в базу.
  7. Создайте статус "загрузка...", который отображается во время выполнения AJAX запроса и исчезает по его окончании.

Часть II: Бесконечная прокрутка

  1. Теперь запросим несколько фильмов и отобразим их. Используя jQuery, удалите форму с вашей страницы и создайте другой запрос AJAX, который получает 10 фильмов из базы и отображает их на странице.
  2. Создайте бесконечный скролл, который загружает еще 10 фильмов и добавляет их к списку, чтобы вы их увидели при прокрутке страницы вниз. Статус "загрузка..." должен появляться, пока ваша программа ждет очередные 10 фильмов из базы.
  3. Потестируйте работу программы. Что нарушает работу прокрутки?
  4. Отправьте код на Github.

Решения студентов

Дополнительные ресурсы

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

Поделиться уроком: