В этом руководстве будет выполнено создание Spinner, типичного значка загрузки, который мы видим на веб-сайтах, например, при работе с запросом к базе данных.
Важно использовать эти методы, чтобы пользователь мог оценить, что наша страница работает, и не думать, что она не работает, обратная связь с пользователем жизненно важна . Мы рассмотрим пример, в котором мы будем использовать JQuery, чтобы запросить API книг Google для получения JavaScript.
HTML код
Код нашего HTML не будет сложным, вы можете увидеть его ниже.
Загрузка Поиск JS книгиВ шапке видно, что я импортирую скрипт script.js, позже мы увидим, что он делает. Мы также импортируем JQuery и шрифт, который будет использоваться для размещения Spinner, это не изображение, это значок, который будет хорошо смотреться на всех типах экранов, вы можете посмотреть, что там есть, и установить его с официальной замечательной страницы. Затем мы помещаем кодировку символов в utf-8 через meta charset .
В части тела была создана кнопка, которая будет отвечать за инициирование запроса к API, и div, в который мы вставим интересующие нас данные из полученного ответа. Оба имеют идентификатор для использования из нашего скрипта.
Код JQuery
Код не сложен, если вы привыкли к AJAX-запросам с JQuery.
$ (document) .ready (function () {$ ("# button"). click (function () {$ ('# data'). html (' ') $ .ajax ({url: "https://www.googleapis.com/books/v1/volumes?q=intitle:javascript"}). done (function (data) {sleep (2000) // Only be используйте, чтобы увидеть счетчик длиннее в примере $ ('# data'). html ("") для (var i = 0; i <data.items.length; i ++) {var book = data.items [i] .volumeInfo; var author = book.authors if (author == undefined) author = "?" $ ('# data'). append (""+ (i + 1) +") "+ book.title +"
- Автор / ы: "+ автор +"")}});})}) функция sleep (миллисекунды) {var start = new Date (). getTime (); while (true) {if ((new Date (). getTime () - start)> миллисекунды) перерыв;}}
Код может быть заключен в $ (document) .ready, это необходимо для загрузки скрипта, когда наш HTML-документ готов и идентификаторы «известны». Внутри мы видим, что мы слышим событие нажатия кнопки, как было сказано ранее, она будет той, которая запускает запрос.Как только событие click запущено, первое, что нужно сделать, это вставить Spinner (как было сказано выше, это не изображение, если бы здесь был gif, мы бы добавили тег img), а затем приступить к выполнению запроса AJAX, это GET запрос, поэтому мы указываем URL, где это будет сделано.
Мы видим .done, эта часть будет выполнена, когда ответ API закончится. В .done у нас есть вызов функции сна (он был создан таким образом, что код «ждет» еще 2 секунды после получения ответа, так что вы можете хорошо оценить Spinner, это не должно быть ясно). Важный код - это тот, который очищает HTML, который имеет идентификатор данных (удаляет Spinner) и заполняет его в цикле данными, которые он получает от API (данные передаются как параметр done, это ответ) для обработки В ответе вы должны знать возвращаемые данные, в этом случае указываются название книги и их автор или авторы.
примечание
Мы могли бы также поставить .fail, я бы выполнил код, который он содержит в случае ошибки, но эта часть очевидна, поскольку для этого примера это не нужно. Если вы хотите узнать больше о запросах AJAX в JQuery, посетите следующую страницу или следующий учебник.
Функция сна не является частью и не интересна для загрузки иконки, но она помогает нам увидеть, что Spinner был добавлен, все, что он делает, это получает начальное время и делает бесконечный цикл до вставленных миллисекунд. в качестве параметра цикл прерывается и функция завершается.
Давайте посмотрим, как работает код, когда вы открываете страницу, мы видим простую кнопку:
Нажатие на него оставит значок Spinner или загрузки, который будет активирован как минимум на 2 секунды (вам нужно будет добавить время, необходимое для запроса):
И в конце петиции мы покажем книги и их авторов, как мы видим ниже:
примечание
Вы можете применить эту технику, если вы делаете запросы напрямую с помощью JavaScript, без использования JQuery, он адаптирует код.
- 0
СТАТЬИ