jQuery Ajax Json이 Google Cloud 서비스와 함께 작동하지 않음 HTML 파일에서 구문 분석

jQuery/JavaScript 및 ajax로 처음 작업했으며 날씨 기온 API를 사용하여 웹 사이트에서 날씨 정보를 표시하려고합니다. Google 클라우드에서 호스팅되는 페이지jQuery Ajax Json이 Google Cloud 서비스와 함께 작동하지 않음 HTML 파일에서 구문 분석

날씨 지하 코드 예제를 읽었으며 그 코드로 익숙해지기 때문에 노력하고 있습니다.하지만 코드를 익숙하게 보이려고 노력하고 있습니다.하지만 앞으로 나아갈 수 있도록 노력하고 있습니다. 비슷한 코드 질문을했지만 다른 곳에서는 아직 얻을 수없는 다른 스택 오버 플로우를 살펴 보았습니다. 중복에 대해 사과하지만 그것이 작동하지 않는 이유가 확실하지 않습니다.

모든 것이 의미가있는 것처럼 보입니다. 그러나 페이지가로드 될 때 HTML이 "경고"한다고 가정 할 때 나는 아무것도 얻지 못합니다. 비록 내가 바보 같은 일을하고있다 할지라도 나는 약간의 의견을 진심으로 감사 할 것입니다.

다음은 JavaScript와 HTML이 혼합 된 HTML 파일입니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Hello, The Cloud!</title> 
    <link rel="stylesheet" type="text/css" href="/static/style.css"> 
    </head> 

    <body> 
    <h1>Hello, The Cloud!</h1> 
    <p> Lets Check the Weather! </p> 
    </body> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

    jQuery(document).ready(function($) { 
     $.ajax({ 
     url : "http://api.wunderground.com/api/47acb7d74302f585/geolookup/conditions/q/IA/Cedar_Rapids.json", 
     dataType : "jsonp", 
     success : function(parsed_json) { 
     var location = parsed_json['location']['city']; 
     var temp_f = parsed_json['current_observation']['temp_f']; 
     alert("Current temperature in " + location + " is: " + temp_f); 
     } 
     }); 
    }); 

    </script> 

</html>

간단한 CSS 파일이 아래에 나와 있습니다.

h1 { 
    color: #000000; 
    text-align: center; 
    font-size: 60px; 
    text-decoration: underline; 

} 

body { 
    background-color: LavenderBlush; 
    font-size: 20px; 
} 

div { 
    background-color: lightgrey; 
    color: #FF0000; 
    id: "clockbox"; 
    font-size: 20px; 
    font-family: "Times New Roman", Times, Serif; 

    width: 420px; 
    padding: 10px; 
    border: 5px solid gray; 
    margin: 0; 
} 

.alert { 
    padding: 20px; 
    background-color: #f44336; /* Red */ 
    color: white; 
    margin-bottom: 15px; 
}

의견을 보내 주셔서 감사합니다.

이 문제는 당신이 당신의 <body> 태그 내부 <script> 태그를하지 않아도 당신에게

출처

2016-09-27 mike_tech123

글쎄, 스크립트 전에'body'를 닫았습니까? – adeneo

그렇지 않으면 괜찮아 보입니다 -> http://jsfiddle.net/adeneo/pw8fgfds/1/ – adeneo

콘솔을 확인 했습니까? HTTPS 문제가 있다고 추측하면 Google Cloud는 HTTPS에서 작동하지만 HTTP를 통해 Underground의 API를 요청하고 있습니다. – yuriy636

감사드립니다. 먼저 오류를 칠 경우

<!DOCTYPE html> 
<html> 
    <head> 

    <title>Hello, The Cloud!</title> 
    <link rel="stylesheet" type="text/css" href="/static/style.css"> 

    </head> 

    <body> 

    <h1>Hello, The Cloud!</h1> 
    <p> Lets Check the Weather! </p> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

     jQuery(document).ready(function($) { 
     $.ajax({ 
      url : "http://api.wunderground.com/api/47acb7d74302f585/geolookup/conditions/q/IA/Cedar_Rapids.json", 
      success : function(parsed_json) { 
      var location = parsed_json['location']['city']; 
      var temp_f = parsed_json['current_observation']['temp_f']; 
      alert("Current temperature in " + location + " is: " + temp_f); 
      } 
     }); 
     }); 

    </script> 

</body> 

</html>

출처

2016-09-27 23:47:37

이것은 형식을 올바르게 지정하는 올바른 방법이며 제출에 감사하지만 문제가 해결되지 않습니다. Google 클라우드에서 실행하면 아무런 경고 메시지가 나타나지 않아 서비스와 관련이 있다고 생각하게 만듭니다. 코드가 아닌가요? –

글쎄, 그것은 나를 위해 완벽하게 작동하기 때문에 뭔가 다른 문제가 있어야합니다. –

정확히 말해 실제 코드보다 Google Cloud와 관련이 있다고 생각합니다. 도와 주셔서 감사합니다. –

, 당신은 경고를받지 않습니다 :

이 무슨 뜻인지입니다. 나는 Google 클라우드 HTTP 요청과 잘 재생되지 않는 것을 알아낼 수 있었다 @GAEfan 및 yuriy636에서 훌륭한 조언을

jQuery(document).ready(function($) { 
     $.ajax({ 
     url : "http://api.wunderground.com/api/47acb7d74302f585/geolookup/conditions/q/IA/Cedar_Rapids.json", 
     dataType : "jsonp", 
     success : function(parsed_json) { 
     console.log(parsed_json); 
     var location = parsed_json['location']['city']; 
     var temp_f = parsed_json['current_observation']['temp_f']; 
     alert("Current temperature in " + location + " is: " + temp_f); 
     } 
     }); 
    });

출처

2016-09-28 00:17:21 GAEfan

매우 흥미 롭습니다! 그래서 파이어 폭스에서 F12로 콘솔을 볼 때, 나는 두 가지 아이템을보고있다. 하나는 "차단 된로드 된 혼합 액티브 컨텐트"http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js "이고 두 번째는"ReferenceError : jQuery가 정의되지 않았습니다 "라는 의미입니다 jQuery 참조 호출이 차단 되었기 때문에 jQuery를 사용할 수 없습니다.이 접근 방법에 대한 아이디어는 무엇입니까? –

'https' : https://ajax.googleapis.com/ajax/libs/jquery/로 변경하십시오. 1.5.1/jquery.min.js' 또는 flexible :'// ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' – GAEfan

알아 냈을 때 HTTPS 만 사용하면됩니다. ''을 요청하면 jQuery를 실제로 사용할 수 있으며 HTTP 날씨 지하 API 요청을 HTTPS로도 요청합니다. –

감사합니다 : 당신이 키 오류가 발생하지 있는지 확인하기 위해이 로깅을 추가하십시오 따라서 아래 코드에서 볼 수 있듯이 URL에서 HTTP에서 HTTPS 로의 간단한 변경이었습니다. 모든 사람의 도움을 https://cloud.google.com/compute/docs/load-balancing/http/

감사합니다 :

여기

<!DOCTYPE html> 
<html> 
    <head> 

    <title>Hello, The Cloud!</title> 
    <link rel="stylesheet" type="text/css" href="/static/style.css"> 

    </head> 

    <body> 

    <h1>Hello, The Cloud!</h1> 
    <p> Lets Check the Weather! </p> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript"> 

     jQuery(document).ready(function($) { 
     $.ajax({ 
      url : "https://api.wunderground.com/api/47acb7d74302f585/geolookup/conditions/q/IA/Cedar_Rapids.json", 
      success : function(parsed_json) { 
      console.log(parsed_json); 
      var location = parsed_json['location']['city']; 
      var temp_f = parsed_json['current_observation']['temp_f']; 
      alert("Current temperature in " + location + " is: " + temp_f); 
      } 
     }); 
     }); 

    </script> 

</body> 

</html>

구글 클라우드 및 HTTP/HTTPS에 대한 추가 정보에 대한 링크입니다!

출처

2016-09-28 00:48:57

jQuery Ajax Json이 Google Cloud 서비스와 함께 작동하지 않음 HTML 파일에서 구문 분석

답변

관련 문제