0
我正在使用openweathermap API製作API項目，而我的問題是我無法獲取名稱和溫度來更改頁面的html。 JSON的名稱和臨時名稱應該如何定位，並將其放在頁面上以取代.city和.temperature？使用它是鍵入一個位置並返回名稱和溫度。謝謝。基於JSON數據的Html
$(document).ready(function(){
//var locname = $('.city');
var temp = $('.temperature');
var APIKEY = '5d2601f4620847da11e653d59d14ae18';
var loc = $('#search').val();
//var responsetext = $(url).html();
function updateByCity(loc){
\t var url = "http://api.openweathermap.org/data/2.5/weather?q=" + loc + "&APPID=" + APIKEY;
\t sendRequest(url);
}
/*function sendRequest(url){
\t var url = "http://api.openweathermap.org/data/2.5/weather?q=" + loc + "&APPID=" + APIKEY;
\t var xmlhttp = new XMLHttpRequest();
\t xmlhttp.onreadystatechange = function(){
\t \t var url = "http://api.openweathermap.org/data/2.5/weather?q=" + loc + "&APPID=" + APIKEY;
\t \t if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
\t \t var data = JSON.parse(xmlhttp.responseText);
\t \t locname = data.name;
\t \t temp = data.main.temp;
\t \t }
\t }
\t xmlhttp.open("GET", url, true);
\t xmlhttp.send();
}*/
$('.enter').click(function(event){
event.preventDefault();
var temp = $('.temperature');
var loc = $('#search').val();
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + loc + "&APPID=" + APIKEY;
\t //$('.temperature').html(temp);
\t //$('.city').html(locname);
\t console.log(url);
\t var xmlhttp = new XMLHttpRequest();
\t xmlhttp.onreadystatechange = function(){
\t \t var url = "http://api.openweathermap.org/data/2.5/weather?q=" + loc + "&APPID=" + APIKEY;
\t \t console.log("lol");
\t var data = $.getJSON(url)
\t var datatext = data.responseText;
\t \t var locname = data.name;
\t \t console.log(datatext);
\t \t console.log(url);
\t \t //$(temp).text(data.main.temp);
\t $('.city').text(locname);
\t };
\t xmlhttp.open("GET", url, true);
\t xmlhttp.send();
});
});html{
background-color:dodgerblue;
margin:0px;
padding:0px;
width:100%;
}
body{
margin:0px;
padding:0px;
}
.container{
width:900px;
height:700px;
background-color:white;
position:absolute;
left:180px;
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
\t -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
\t box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
}
.citysearch{
left:375px;
top:40%;
margin:0px;
padding:0px;
position: absolute;
border:solid black;
}
.results{
\t width:300px;
\t height:200px;
\t position:absolute;
\t left:300px;
\t color:white;
\t top:50%;
\t background-color:#008B8B;
}
.results:hover{
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
\t -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
\t box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
}
.inputname{
\t font-family:Lato;
\t position:absolute;
\t top:30%;
\t left:350px;
}
.enter{
width:100px;
height:50px;
position:absolute;
top:265px;
left:250px;
background-color:#00FA9A;
border:#00FA9A;
}
.icons8{
position:relative;
top:650px;
}
.icon{
\t position:absolute;
\t left:400px;
}
.temperature{
\t font-family:Lato;
\t margin:5px;
\t font-size:40px;
\t position:absolute;
\t right:110px;
}
.city{
font-family:Lato;
margin:5px;
position:absolute;
right:130px;
top:55px;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" type="text/css" href="weather.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src ="weather.js"></script>
</head>
<div class="container">
<body>
<!-- Partly Cloudy Day icon by Icons8 -->
<img class="icon icons8-Partly-Cloudy-Day" src="data:image/png;base64,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" width="96" height="96">
<p class="inputname">Look up weather for somewhere.</p>
<input type="submit" class="enter" value="Enter"><input type="text" name="Button" class="citysearch" id="search">
<div class="results">
<div class="temperature">N/A</div>
<div class="city">N/A</div>
</div>
<a href="https://icons8.com" class="icons8">Icon pack by Icons8</a>
</body>
</div>
</html>
嘗試更換'TEMP = data.main.temp;'和'temp.text（data.main.temp）;'這是否幫助任何？ –
它是否成功回調？嘗試使用'$ .get（）'而不是'$ .getJSON（）' – Developer
好了，現在它會正確記錄除responseText以外的所有內容。我不小心複製並粘貼了一個不是最新的版本到這裏。事情是響應文本回來undefined。所以它沒有正確抓取JSON。有任何想法嗎？ – William