Мой URL-адрес API работает в браузере Chrome, но не будет работать в моей тестовой среде локального хоста apache.

Когда я помещаю это в браузер, он возвращает мне объект json со всеми данными о погоде: http://api.openweathermap.org/data/2.5/weather?zip=90210&units=imperial&appid={Ключ API}

Однако я использую свой XAMPP Apache в папке htdocs, чтобы попробовать его в своем коде. Может кто-нибудь посмотреть мой код и посмотреть, что здесь не так? Большое спасибо за помощь.

var weatherInfo = document.getElementById("weather");
var zipCodeForm = document.getElementById("zipCodeForm");

function getWeather(zipCode){
	//create the url for the request
	var endpoint = "http://api.openweathermap.org/data/2.5/weather";
	var apiKey = {API Key};
	var queryString = "zip=" + zipCode + "&units=imperial&appid=" + apiKey;
	var url = endpoint + "?" +queryString;

	//create the request to get the weather data
	var xhr = new XMLHttpRequest();
	xhr.addEventListener("load", responseReceivedHandler);
	xhr.requestType = "json";
	xhr.open("GET", url);
	xhr.send();

	console.log("getWeather")
	console.log(xhr.response.status);
}

function responseReceivedHandler(){
	if(this.status === 200){
		weatherInfo.innerHTML = "Current temperature: " + this.response.main.temp;
	}

	else{
		weatherInfo.innerHTML="Not working";
	}

	console.log("responseReceivedHandler")


}

getWeather(90210);
 <body>
 	<form id="zipCodeForm">
 		<label for="zipCode">Please enter your zip code: </label>
 		<input type="text" name="zipCode" id="zipCode">
 		<input type="submit" name="submit">
 	</form>

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


person Amber    schedule 06.05.2020    source источник
comment
Без вашего ключа API нам будет сложно протестировать его. (Пожалуйста, не делитесь своим API-ключом!) Кроме того, он не будет работать, что-то вроде расплывчатости. Вы видите какие-либо ошибки в консоли браузера?   -  person kmoser    schedule 06.05.2020
comment
{coord: {долгота: -118.41, широта: 34.09}, погода: [{id: 800, main: Clear, описание: ясное небо, icon: 01d}], base: station, main: {temp: 81.19, feel_like: 80,19, temp_min: 75,2, temp_max: 86, давление: 1013, влажность: 44}, видимость: 16093, ветер: {скорость: 5,82, град: 220}, облака: {все: 1}, dt: 1588786879, sys: { тип: 1, идентификатор: 5872, страна: США, восход солнца: 1588769932, закат: 1588819291}, часовой пояс: -25200, идентификатор: 0, имя: Беверли-Хиллз, код: 200}........... ...........Ссылка браузера дает мне все правильные данные. Но когда я проверяю это, запуская свой код, я получаю ошибку 401.   -  person Amber    schedule 06.05.2020
comment
Когда я удаляю? в моей переменной URL я получаю ошибку 401. Когда я добавляю его обратно, я получаю undefined. Я чувствую, что? хотя должно быть там   -  person Amber    schedule 06.05.2020
comment
Какая ссылка в браузере? И где вы видите/обнаруживаете эту ошибку 401? 401 — это HTTP-код для неавторизованного, что означает, что вы вероятно, вы не указали правильный ключ API.   -  person kmoser    schedule 06.05.2020
comment
? является частью URL. Почему бы вам удалить его?   -  person kmoser    schedule 06.05.2020
comment
Это не неправильный API. Когда я копирую и вставляю эту ссылку API в браузер, такой как chrome, он возвращает объект json.... Когда я использую ту же информацию API в своем коде, что и вставленная выше, и запускаю ее на своем локальном хосте apache, я получаю ошибку 401 или undefined, когда я console.log(xhr.response.status)   -  person Amber    schedule 06.05.2020
comment
Я бы не стал удалять ?, я имею в виду, что я просто пробую все на свете, чтобы заставить его работать. Я согласен, что он должен быть там.   -  person Amber    schedule 06.05.2020
comment
Давайте продолжим это обсуждение в чате.   -  person kmoser    schedule 06.05.2020


Ответы (2)


ВОТ РЕШЕНИЕ!!

Мой ответ нужно было преобразовать из json в объект javascript. Это продолжало давать мне неопределенность, когда я пробовал this.response.main.temp. Как я понял, когда я попробовал this.response[0], результатом было «{». Я подумал: «Хорошо, значит, это должно быть невозможно интерпретировать этот json как объект». Это просто строка всех символов json. Итак, я нашел json.parse(), чтобы превратить его в объект javascript, и бац-успешный пинг API с возможностью доступа ко всем данным.

person Amber    schedule 07.05.2020

В качестве альтернативы вы можете просто изменить «requestType = «json»» на responseType = json.... вместо того, чтобы анализировать его в объект. Это не тип запроса. Это тип ответа.

person Amber    schedule 07.05.2020