Как получить JSON, используя Javascript - PullRequest
Новая
       1

Как получить JSON, используя Javascript

0 голосов
/ 28 мая 2018

Я пытаюсь создать небольшой сайт для прогнозирования погоды.При отправке запроса в accuWeather для получения JSON я не могу получить ответ.Я проверил запрос несколько раз, и он работает нормально.Может кто-нибудь указать, что не так в моем коде, чтобы я мог это исправить?Кроме того, если вы ответите, можете ли вы использовать Javascript вместо JQuery Link:

http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true

Это мой проект по изучению javascript.apiKey также общедоступен. 

<html>
<head>
        <meta charset="utf-8"/>
        <title>getting</title>
    <script>

        function start(){
            //console.log("asdasd");
            var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true" ;
            var request = new XMLHttpRequest();
            console.log(request);
            request.open('GET', requestURL);
            //console.log(request.response);
        }
        window.addEventListener("load",start,false);
    </script>
</head>
<body>

    <div id="loading"></div>
</body>
</html>

Буду признателен за любую помощь.

Ответы [ 3 ]

0 голосов
/ 28 мая 2018

Пара вещей.во-первых, вам нужно отправить запрос, используя send().во-вторых, если вы делаете асинхронный запрос, вам нужно добавить прослушиватель для обработки ответа: 

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200)
      console.log(request.response);
  };

  request.send(null);

Если вы не хотите делать его асинхронным, вы всегда можете передать false какВторой параметр для вашего open() вызова, но это крайне нежелательно, так как это будет блокирующий вызов.

Не стесняйтесь читать немного больше в XMLHttpRequests здесь для дополнительных опций

Вот рабочий пример

0 голосов
/ 28 мая 2018

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Цепные обещания с затем и поймать

Возможно, вам придется использовать JSON.parse для ваших данных 

var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true";


//ES5
function XMLrequest() {
  var request = new XMLHttpRequest();
  request.open('GET', requestURL, true);
  request.onreadystatechange = function() {
    if (request.readyState === 4) {
      console.log('XML', request.response);
    }
  }
  request.send();     
}

//ES6
function getWithFetch() {
  fetch(requestURL)
    .then(res => {
      console.log('fetch', res)
    })
    .catch(err => {
      console.log(err, 'fetch fail')
    })
}

// ES7
async function getWithAsycAwait() {
  try {
    const data = await fetch(requestURL);
    console.log('await', data)
  } catch(e) {
    console.log(e, 'await fail')
  }
}

getWithAsycAwait()
getWithFetch()
XMLrequest()
0 голосов
/ 28 мая 2018

Вы должны попробовать сделать что-то вроде этого: 

<html>
<head>
        <meta charset="utf-8"/>
        <title>getting</title>
        <script>
            function start(){
                //console.log("asdasd");
                var requestURL = "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true" ;
                var request = new XMLHttpRequest();
                console.log(request);
                request.open('GET', requestURL);
                request.send();
                //console.log(request.response);
            }
            window.addEventListener("load",start,false);
        </script>
</head>
<body>

    <div id="loading"></div>
</body>
</html>

или что-то вроде этого: 

<html>
<head>
        <meta charset="utf-8"/>
        <title>getting</title>
        <script>
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                // Action to be performed when the document is read;
                }
            };
            xhttp.open("GET", "http://dataservice.accuweather.com/locations/v1/cities/search?apikey=BfZGgoA9OaaSy7oyAReezmDFngUe2Lek&q=Annandale&language=en-us&details=true", true);
            xhttp.send();
            window.addEventListener("load",start,false);
        </script>
</head>
<body>

    <div id="loading"></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...