解析HTML文件中的jQuery Ajax Json無法使用Google Cloud Service

我一直在第一次使用jQuery/JavaScript和ajax，並且試圖與地下天氣API一起工作，以便在網頁上顯示一些天氣信息。在谷歌雲上託管的頁面。解析HTML文件中的jQuery Ajax Json無法使用Google Cloud Service

我一直在閱讀天氣地下代碼的例子，我正在努力處理這就是爲什麼代碼看起來很熟悉，但我只是想讓它工作，所以我可以前進。我也看過其他堆棧溢出，其中提出了類似的代碼問題，但我仍然沒有找到任何地方。我爲冗餘道歉，但我不確定它爲什麼不起作用。

一切似乎都是有道理的，但是當HTML被設想爲「警報」時，頁面加載我什麼都沒有。即使我正在做一些愚蠢的事情，我也會很感激一些輸入，只是想讓這個塊繼續前進。

下面是我的HTML文件，它是JavaScript和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查看控制檯時，我看到兩個項目。一個說：「阻止加載混合活動內容」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'或靈活：'// ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' – GAEfan

想通了，我只需要使用HTTPS請求''這種方式我實際上可以使用jQuery，我會改變HTTP請求天氣地下API調用HTTPS以及。 –

承蒙@GAEfan和yuriy636一些很好的建議，我能弄清楚，谷歌雲不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>

下面是詳細信息的鏈接在谷歌雲和HTTP/HTTPS：大家的幫助https://cloud.google.com/compute/docs/load-balancing/http/

謝謝！

來源

2016-09-28 00:48:57

解析HTML文件中的jQuery Ajax Json無法使用Google Cloud Service

回答

相關問題