2016-07-23 4 views
0

Выполнение вызова API openweather. Когда я ввожу URL-адрес в браузер, я могу увидеть объект JSON. Однако мой аякс ниже не позволяет ничего показывать в моем HTML. Даже если я хочу document.write весь объект json, я не могу. Я могу вывести lat и long, просто найдите, что геолокация работает. Не уверен, что не так с этим кодом.Все работает, но Ajax

Вот HTML:

<body> 
    <div class="container"> 
    <div class="col-lg-12 header"> 
    <h1>My Location</h1> 
    </div> 
    <div class="row text-center box"> 
     <div class="col-lg-12" id="data">Lat Long</div> 
    </div> 
    </div> 
</body> 

Вот JS:

$(document).ready(function() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(main); 
    } 
}); 
function main(position){ 
    var lat = position.coords.latitude; 
    var long = position.coords.longitude; 
    var api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat  + "&lon=" + long + "&appid=[redacted key]"; 
    $.ajax({ 
    dataType: 'json', 
    url: api, 
    success: function(data) { 
     city = data.name; 
     $("#data").html(city); 
    } 
    }); 
} 
+0

Получаете ошибку в консоли о междоменных запросах? – nnnnnn

+0

Вы получили сообщение об ошибке в консоли о попытке доступа к HTTP из HTTPS? (Серьезно, вам нужно **, чтобы посмотреть консоль, чтобы увидеть сообщения об ошибках, прежде чем спрашивать о SO). – Quentin

+0

Я не получил консольную ошибку messgae – Andy

ответ

1

Попробуйте $.getJson вместо $.ajax: $.getJSON({ dataType: 'jsonp', url: api, success: function(data) { city = data.name; $("#data").html(city); }

В HTML, не забудьте добавить JQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> <script src="a.js"></script> // любой файл JS называется

без изменения вашего кода, страница запрашивала доступ к моему местоположению, а затем отобразила мой текущий город. Я не уверен, что он должен выводить. Что вы ожидаете от вывода?

+0

Я ожидаю, что город станет выходом. Ваш код работал в Chrome? Я просто не пробовал. Вот jsfiddle: https://jsfiddle.net/Lx24c5mu/ – Andy

+0

Да, это работало с Chrome и Firefox. В HTML я добавил: ' '. Возможно, есть проблема с вашими сценариями, задана ли jquery перед вашим js-файлом? –

+0

Спасибо. Он работает в Safari, но не в Chrome. Идти, чтобы сделать это до возможной проблемы с геолокацией в Chrome. Но вы меняетесь от .ajax к .getJSON определенно работали. Предположим, это потому, что данные json отформатированы, не нужно использовать ajax? – Andy

1

Проблема не в вашем АЯКС вызова.

Код, кажется, работает очень хорошо с жестко закодированными координатами, а также работает в его текущей форме во всех других браузерах, кроме Chrome.

Если вы хотите использовать геолокацию в новых версиях Google Chrome, ваш хост должен быть защищенным (HTTPS).

предупреждение Chrome:

getCurrentPosition() и watchPosition() осуждаются на небезопасном происхождении. Чтобы использовать эту функцию, вам следует переключить приложение в безопасное происхождение, например HTTPS. См. https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins для получения более подробной информации.