2016-07-23 3 views
0

openweather API를 호출합니다. URL을 브라우저에 입력하면 JSON 객체를 볼 수 있습니다. 그러나 내 아약스는 내 HTML에 아무것도 표시 할 수 없습니다. json 객체 전체를 document.write하는 경우에도 그렇게 할 수 없습니다. 위도와 경도를 출력 할 수 있으므로 지리적 위치가 작동합니다. 이 코드에 무엇이 잘못된 것인지 잘 모릅니다. 여기모든 것이 작동하지만 Ajax는 작동합니다.

<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있어 :

다음은 HTML의

$(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

콘솔에서 HTTPS에서 HTTP에 액세스하는 중 오류가 발생 했습니까? (진심으로, 당신은 ** 콘솔에서 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에서 나는 다음을 추가했다 :' '. 아마도 스크립트에 문제가 있습니다. js 파일이 js 파일보다 먼저 참조되어 있습니까? –

+0

감사합니다. Safari에서는 작동하지만 Chrome에서는 작동하지 않습니다. Chrome에서 가능한 지리적 위치 문제까지 백분율로 표시합니다. 하지만 .ajax에서 .getJSON으로 바뀝니다. 데이터가 json 형식이므로 ajax를 사용할 필요가 없다고 가정합니다. – Andy

1

문제는 Ajax 호출에 있지 않습니다.

코드는 하드 코딩 된 좌표에서 작동하는 것으로 보이며 Chrome 이외의 다른 모든 브라우저에서도 현재 양식으로 작동합니다.

최신 버전의 Google 크롬에서 geolocation을 사용하려면 호스트가 안전한 위치 (HTTPS) 여야합니다.

크롬 경고 :

getCurrentPosition()와 watchPosition()는 불안 기원에 사용되지 않습니다. 이 기능을 사용하려면 애플리케이션을 HTTPS와 같은 안전한 출처로 전환하는 것을 고려해야합니다. 자세한 내용은 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins을 참조하십시오.

관련 문제