jQueryのAjaxのJSON解析でHTMLファイルは、私が初めてのjQuery/JavaScriptとAjaxを使って作業してきた

Googleクラウドサービスで動作しないと私はWEB-にいくつかの気象情報を表示するには、天候の地下APIで動作するようにしようとしていますgoogleクラウドでホストされているページ。jQueryのAjaxのJSON解析でHTMLファイルは、私が初めてのjQuery/JavaScriptとAjaxを使って作業してきた

私は天気地下のコード例を読んでいると私は、コードがとても見覚えう理由であることで動作するようにしようとしていますが、私はちょうどそれは私が前方に移動することができます動作するように取得しようとしています。私は同様のコードの質問があったところで他のスタックオーバーフローを見てきましたが、私はまだどこにもいません。私は冗長性についてお詫びしますが、なぜ動作していないのか分かりません。

すべてが意味をなさないと思われますが、ページが読み込まれるときに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; 
}

フィードバックに感謝します。

はあなたに

出典

2016-09-27 mike_tech123

さて、スクリプトの前に 'body'を閉じましたか？ – adeneo

そうでなければ、うまくいくようです - > http://jsfiddle.net/adeneo/pw8fgfds/1/ – adeneo

コンソールをチェックしましたか？ HTTPSの問題があると推測すると、Google CloudはおそらくHTTPSで動作しますが、HTTP経由でUndergroundのAPIをリクエストしています。 – yuriy636

ありがとう問題は、あなたの<body>タグ内<script>タグを持っていないということです。

これは私が何を意味するかです：

<!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と関連があると考えています。お手伝いありがとう。 –

あなたが最初のエラーがヒットした場合、アラートを取得することはできません。あなたがキーエラーを取得されていませんを確認するために、このログを追加してみてください：

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

非常に興味深い！ Firefox上でF12を使ってコンソールを見ると、2つの項目が表示されています。 1つは「ブロックされた積み重ねられたアクティブなコンテンツをロードしています」http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js "、もう1つは" 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 HTTPSへの天気地下APIコールのリクエスト –

@GAEfanからいくつかの素晴らしいアドバイスのおかげとyuriy636私はGoogleクラウドはHTTPリクエストとうまく再生されないことを把握することができましたしたがって、URLのHTTPからHTTPSへの変更は、以下のコードで確認できます。ここで

<!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>

はGoogleクラウドおよびHTTP/HTTPS詳細へのリンクです：https://cloud.google.com/compute/docs/load-balancing/http/

は、すべての人の助けをありがとう！

出典

2016-09-28 00:48:57

jQueryのAjaxのJSON解析でHTMLファイルは、私が初めてのjQuery/JavaScriptとAjaxを使って作業してきた

答えて

関連する問題