Блог

Главная - Вопросы по программированию - Как захватить данные REST API и отобразить на странице html

Как захватить данные REST API и отобразить на странице html

#html #jquery #ajax #api #rest

#HTML #jquery #ajax #API #rest

Вопрос:

Привет, я пытаюсь получить данные из rest API моего LMS, а затем отобразить их на HTML-странице, у меня есть URL-адрес и ключ на предъявителя авторизации

Мне было предоставлено несколько примеров того, как я должен показывать свой URL-адрес и где разместить свой ключ авторизации, см. Ниже

 GET https://example.thoughtindustries.com/incoming/v2/ping

Пример запроса

 CURL https://example.thoughtindustries.com/incoming/v2/ping -H 'Authorization: Bearer APIKEY'

Я получаю обратный вызов, используя CURL в Visual Studio code, поэтому я знаю, что его можно извлечь.

Я нашел этот метод в Интернете, который, как я думал, сработает

 $.ajax({
  url: "https://api.apiscience.com/v1/monitors/1572022",
  headers: {
    "Authorization": "Bearer NN_6xxxxx"
  }
}).done(function(data) {
  $('#monitor_data').append(JSON.stringify(data))
});
 
 <h2>Response Data</h2>
<div id="monitor_data">
  <!--location for Javascript to print data-->
</div>

Я думал, что это будет ответом при замене на мой собственный URL и ключ, но ничего не произошло. Нужно ли мне включать -H где-то, и если да, то как это может выглядеть?

Комментарии:

1. -H это флаг для отправки заголовка в запросе, который ваш код jQuery выполняет правильно. Я бы посоветовал проверять консоль на наличие ошибок при выполнении вашего вызова и вкладку сеть после выполнения вызова, чтобы увидеть ответ. Я предполагаю, что вы заблокированы CORS, или токен на предъявителя недействителен, при условии, что страница структурирована правильно.

Ответ №1:

Это просто, поскольку вы уже это сделали. Напишите вызов get ajax в свой API и отобразите свою html-часть из ответа, который вы получаете от API.

Возьмите пример примера:

 var getGamePeriod = function(){
            $.ajax({  
                type: "GET",
                url: "yourendpointhere?param=val",
                contentType: "application/json",
                dataType : 'json',
                success : function(response){
                    if(response amp;amp; response.isSuccess){
                      // do your stuffs here..
                    }
                },
                error : function(data,textStatus,errorMessage){
                    alert( textStatus   " "   errorMessage);
                }
            });
        }

Конечно, вам нужно передать заголовок или токен аутентификации, если это требуется для доступа к API. Поместите этот метод в document.ready метод.

Метки: