jQuery文件中的HTML解析不能与谷歌云服务一起使用
jQuery文件中的HTML解析不能与谷歌云服务一起使用
提问于 2016-09-28 07:32:40
我第一次使用jQuery/JavaScript和ajax，我正在尝试使用天气地下API在google云上托管的网页上显示一些天气信息。
我一直在阅读天气地下代码示例，我正在尝试使用它，这就是为什么代码看起来如此熟悉，但我只是想让它正常工作，这样我就可以继续前进。我还查看了其他堆栈溢出，其中提出了类似的代码问题，但我仍然没有取得任何进展。我为冗余道歉，但我不确定为什么它不工作。
一切似乎都很有意义，但当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;
}非常感谢您的反馈！
谢谢
回答 3
Stack Overflow用户
发布于 2016-09-28 08:48:57
感谢@GAEfan和yuriy636的一些很好的建议，我能够弄清楚Google Cloud不能很好地处理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/
感谢大家的帮助！
Stack Overflow用户
发布于 2016-09-28 07:47:37
问题是您的<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>Stack Overflow用户
发布于 2016-09-28 08:17:21
如果你首先遇到一个错误，你将不会到达警报。尝试添加此日志记录，以确保不会收到关键错误：
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);
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39735851
复制相关文章
相似问题
腾讯云开发者
