Второй вызов AJAX не работает - PullRequest
Новая
       1

Второй вызов AJAX не работает

0 голосов
/ 21 октября 2019

Последнее обновление

Я понял, почему у меня возникла неопределенность, когда я создал переменную result2, я установил ее как undefined вместо let result2 = '';, установив ее в строку. Как только я сделал эту настройку, неопределенное ушло. Окончательный скрипт script.js приведен ниже.

last update

Обновление 4

Наконец-то это сработало, дошло доследующая строка, которая была неправильной document.querySelectorAll("weathers").innerHTML = result2; Я должен был вернуться и изменить погода на идентификатор , а не класс , и мне пришлось изменить строку выше наdocument.querySelector("#weathers").innerHTML += result2; и теперь это работает. Я просто должен выяснить сам, почему я получаю неопределенное в моем коде см. Изображение.

5th image

Обновление 3

Я дошел до своей последней части, я получил желаемые результатыесли я запишу в журнал свои результаты, которые выглядят так:

4th image

С этой строкой я ничего не получаю в своем html document.querySelectorAll("weathers").innerHTML = result2; Я собираюсьпопробуйте что-нибудь еще, чтобы посмотреть, смогу ли я заставить это работать. Если вы заметили, что в моем коде на изображении появляется неопределенное значение, знает ли кто-нибудь, влияет ли это на то, почему я не получаю вывод? Я также не получаю сообщений об ошибках.

ОБНОВЛЕНИЕ 2

Я внес коррективы для устранения слишком большого количества кода, код обновлений будет только в моем файле script.js, указанном ниже,Я получаю следующий вывод, который представляет собой массив объектов:

third image

Когда я запускаю код, я получаю следующее сообщение об ошибке:

Uncaught TypeError: Невозможно прочитать свойство 'name' undefined в XMLHttpRequest.xhr2.onload (script.js: 57) xhr2.onload @ script.js: 57 load (асинхронная) loadWeathers @ script.js: 33

Я собираюсь поработать над правильным синтаксисом для извлечения необходимой мне информации, поскольку теперь это массив объектов, а не просто объект.

ОБНОВЛЕНИЕ 1

С предложением ниже я смог наконец-то получить что-то, от чего можно работать. Теперь я вижу, что вместо того, чтобы указывать один город за раз, он помещает все города в URL-адрес запроса API, и я получаю следующее сообщение об ошибке:

script.js: 77 GEThttp://api.openweathermap.org/data/2.5/weather?q=San_Francisco,Miami,New_Orleans,Chicago,New_York_City&APPID=XXXXXXXX 404 (Не найдено)

Справочная информация:

Я изучаю API и создаю веб-приложение для мини-погоды. Я изучаю долгий путь Vanilla Javascript, прежде чем перейти к тому же в Jquery.

Цель:

Я хотел бы, чтобы две вещи происходили одновременно:

  1. Когда пользователь вводит название городапоявится карта с информацией о погоде.
  2. Когда пользователь посещает страницу, на этой странице уже будет около пяти крупных городов, например:

first

Что у меня есть до сих пор:

До сих пор я был в состоянии построить функциональность для ввода, поэтому, когда пользователь вводит название города, карта будет всплывать на страницеи выглядит так:

second image

У меня также есть код, чтобы перейти к следующей теме, которая является моей проблемой.

Проблема:

Я добавил второй вызов ajax, который содержит массив городов, которые будут добавлены в URL. Я добавил вторую кнопку («Получить погоду») для целей тестирования, чтобы при нажатии на нее все города появлялись, как на первом изображении. Я провел некоторые исследования, но все, что я нахожу, включает в себя jquery, а не ванильный Javascript Ajax. Я не могу понять, почему ничто не населяет. Я проверил консоль на наличие ошибок, и я не получаю никаких. Когда я проверяю сетевой трафик, я не получаю никаких вызовов. Я ничего не получаю и не могу понять, почему.

Вот мой html-файл: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
    <title>Current Weather App</title>
</head>

<body>


    <main role="main">

        <section class="jumbotron text-center">
            <div class="container">
                <h1 class="jumbotron-heading">Today's Weather</h1>
                <p class="lead text-muted">Curious about weather in your location? Just fill in below and submit.</p>
                <p>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="city">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" id="buttonW" type="button">Get Weather</button>
                            <button class="btn btn-outline-secondary" id="buttonW2" type="button">Get Weathers</button>
                        </div>
                    </div>

                </p>
            </div>
        </section>


        <div id="weather"></div>

        <div class="album py-5 bg-light">
            <div class="container">

                <div class="row" id="weathers"></div>

            </div>
        </div>
    </main>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
    <script src="script.js"></script>
</body>

</html>

Вот мой FINAL script.js файл: 

    // Create an event listener
 document.getElementById("buttonW").addEventListener("click", loadWeather);
 document.getElementById("buttonW2").addEventListener("click", loadWeathers);

 ///////////////THIS IS PART OF THE loadWeathers///////////////////////////////////////////////////////////////////////////////////////////

 function getCity(locations) {

   for (let i = 0; i < locations.length; i++) {

   }
   return locations;
 }


 function loadWeathers() {
   let xhr2 = new XMLHttpRequest();
   const cities = [
     "5368361",
     "4173495",
     "4335045",
     "4887398",
     "5128638"
   ];
   const base_path2 =

     "http://api.openweathermap.org/data/2.5/group?id=" + getCity(cities) + "&APPID=XXXXXXXXXXXXXXXXXXXXXX";



   xhr2.open("GET", base_path2, true);

   xhr2.onload = function () {

     if (this.status == 200) {
       let cityWeathers2;
       try {
         cityWeathers2 = JSON.parse(this.responseText);
       } catch (e) {
         // JSON not valid, show error message
       }
       console.log(cityWeathers2)


       //      //add weather info
       for (let i = 0; i < cities.length; i++) {

         let result2 = '';



         result2 +=
           `<div class="col-md-4">
            <div class="card mb-4 box-shadow">
                    <div class="card-body">
                    <h5 class="card-title">${cityWeathers2.list[i].name}</h5>
                    <p class="card-text">Here are some weather details for your City</p>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">Weather: ${cityWeathers2.list[i].weather[0].main} <img class="card-img-top weather-icon" src="${getIconURL(cityWeathers2.list[i].weather[0].icon)}" alt="Card image cap"></li>
                    <li class="list-group-item">Temperature: ${convertKtoF(cityWeathers2.list[i].main.temp) }&deg; </li>
                    <li class="list-group-item">Wind Speed: ${convertMPStoMPH(cityWeathers2.list[i].wind.speed) } </li>
                    <li class="list-group-item">Geo Location: ${cityWeathers2.list[i].coord.lat} , ${cityWeathers2.list[i].coord.lon}</li>
                  </ul>
             </div>`

         //  console.log(result2)


         document.querySelector("#weathers").innerHTML += result2;
       }
     }

   }

   xhr2.send();

 }


 function loadWeather() {
   // console.log(city);
   let xhr = new XMLHttpRequest();

   const city = document.getElementById("city").value;
   const base_path =
     "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&APPID=XXXXXXXXXXXXXXXXXXXXXXX";





   xhr.open("GET", base_path, true);



   xhr.onload = function () {
     //   const city = document.getElementById("city").value;

     if (this.status == 200) {
       let cityWeathers;
       try {
         cityWeathers = JSON.parse(this.responseText);
       } catch (e) {
         // JSON not valid, show error message
       }



       const result =

         `<div class="card" style="width: 18rem;">

              <div class="card-body">
                <h5 class="card-title">${cityWeathers.name}</h5>
                <p class="card-text">Here are some weather details for your City</p>
              </div>
              <ul class="list-group list-group-flush">
                <li class="list-group-item">Weather: ${cityWeathers.weather[0].main} <img class="card-img-top weather-icon" src="${getIconURL(cityWeathers.weather[0].icon)}" alt="Card image cap"></li>
                <li class="list-group-item">Temperature: ${convertKtoF(cityWeathers.main.temp) }&deg; </li>
                <li class="list-group-item">Wind Speed: ${convertMPStoMPH(cityWeathers.wind.speed) } </li>
                <li class="list-group-item">Geo Location: ${cityWeathers.coord.lat} , ${cityWeathers.coord.lon}</li>
              </ul>
         </div>`;


       document.getElementById("weather").innerHTML = result;
     }

   }



   xhr.send();

 }


 // Convert from Kelvins to Fahrenheit
 function convertKtoF(kelvin) {
   return Math.round((kelvin - 273.15) * 1.8);
 }

 // Convert from Meters Per Second to Miles Per Hour
 function convertMPStoMPH(mps) {
   return (Math.round(10 * mps * 2.2369362920544) / 10) + " mph";
 }
 // Weather icon
 function getIconURL(icon) {
   return "https://openweathermap.org/img/w/" + icon + ".png";
 }

Будем весьма благодарны за любые рекомендации или предложения!

1 Ответ

5 голосов
/ 21 октября 2019

Я не могу говорить о точности запроса (за комментарии), но проблема в том, что xhr2.send(); находится в теле вашей функции xhr2.onload.

Для нескольких городов вам может понадобитьсячтобы использовать идентификаторы городов, см. https://openweathermap.org/current#severalid. В документах не упоминается несколько городов по названию, как вы пытаетесь это сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...