Question

我制作了一个天气应用程序。使用免费API并使用$ .getJSON检索其JSON并使用回调函数，以便第一个JSON在第二个JSON之前完成，这样我就可以在继续下一个指令之前存储我需要的值。它工作了3天，我今天检查了它，它突然停止工作。没有使用第一个$ .getJSON处理任何内容，尝试在函数内部进行安慰以检查并且没有任何内容。谢谢你的帮助！

＆＃13;

$(document).ready(function(){
var location, temperature, region, weather;
$.getJSON("http://ip-api.com/json", function(ipData, ipStatus, xhr){
  if(ipStatus == "success")
            console.log("External content loaded successfully!");
  if(ipStatus == "error")
            console.log("Error: " + xhr.status + ": " + xhr.statusText);

location = ipData.city + ", " + ipData.region;
region = ipData.region;
 console.log(region);

$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + location + "&type=accurate&units=metric&appid=166d250001819b0da20d5c60a03fcc7b", function(data, status, xhr){
        if(status == "success")
            console.log("External content loaded successfully!");
        if(status == "error")
            console.log("Error: " + xhr.status + ": " + xhr.statusText);
    console.log(data);
 
temperature = Math.round(data.main.temp);
 weather = data.weather[0].main;
 
  $("#location").html(location); $("#temperature").html(temperature + '' + '°');
  $("#temperature").append('<span id="type">C</span>');
 $("#temperature").on('click',"span#type", changeNotation);
  
 function changeNotation(){
   var tempEl = $("#temperature");
   var tempC = temperature, tempF = Math.round((tempC * 9 / 5) + 32);
   var el = $("#type"),
  	    notation = $("#type").text().trim();
  if( notation == 'C'){
      tempEl.html(tempF + '°' + '<span id="type">F</span>');
  }else if(notation == 'F'){
      tempEl.html(tempC + '' + '°' + '<span id="type">C</span>');
  }
}

changeBackground(weather, region);
    
function changeBackground(weather, region){
  var elImg = $("#img");
 var noNewYork = false;
  console.log(weather);
  switch(true){
   case weather == 'Clear' && region == 'NY':
  elImg.css("background-image", "url(https://static1.squarespace.com/static/544ff5d2e4b0f5f55c912ba3/t/5457bfa5e4b0317a94783016/1415036844256/NYSkyline_Sunny_crop.jpg?format=2500w)");
   break;
   case weather == 'Rain' && region == 'NY':
    elImg.css("background-image","url(http://cdn.citylab.com/media/img/citylab/2014/10/5969979038_c7fe5b0d81_b/lead_large.jpg)");
     break;
   case weather == 'Clouds' && region == 'NY':
     elImg.css("background-image", "url(http://pics4.city-data.com/cpicv/vfiles1486.jpg)");
     break;
   case weather == 'Snow' && region == 'NY':
     elImg.css("background-image", "url(http://static6.businessinsider.com/image/511669e869bedda03e000013-1200/snowstorm-february-2013-manhattan-ny-uws.jpg)");
     break;
    default: 
      noNewYork = true;
   
}
  if(noNewYork){
    switch(weather){
    case 'Clear':
          elImg.css("background-image", "url(http://portugalresident.com/sites/default/files/field/image/istock_sunny_sky_with_grass_000005407896small.jpg)");
     break;
        case 'Snow':
          elImg.css("background-image", "url(http://www.lewistonmaine.gov/images/pages/N541/SNOW.jpg)");
     break;
        case 'Rain':
          elImg.css("background-image", "url(http://az616578.vo.msecnd.net/files/2016/05/28/636000076698153744-318535480_maxresdefault.jpg)");
     break;
        case 'Clouds':
          elImg.css("background-image", "url(http://www.weatherwizkids.com/wp-content/uploads/2015/02/fractus-clouds.jpg)");
        break;
      default:
        elImg.css("background-image", "url(http://wallpapercave.com/wp/qQa5Pd7.jpg)");
        break;
  }
 }
}
});
});
});

＆＃13;

#location{
  font-size: 22px;
}
span#type{
  font-size: 20px;
  color: red;
  cursor: pointer;
  font-style: oblique;
}
h2{
  color: blue !important;
}
#table{
  display: table;
  width: 20px;
  background-color: black !important;
  margin:0 auto;
  padding:.5em;
}
body#img{
  background-size:     cover;                  
    background-repeat:   no-repeat;
    background-position: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <!docTYPE HTML> -->
<html>
  <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>


 <div class="jumbotron text-center">
    <h2 class="text-info"> Welcome to the <span><b>Weather App!</span></b></h2>
    <p class="text-primary bg-info text-center">
      This app. will display the weather based on your current location. Click on the C or F to toggle between celsius and fahrenheit.</p>
  </div>
 
  <body id="img">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
 <div id="table">
  <h2 class="text-center"><b> Current location </b></h2>
      <h1 class="text-center text-info" id="location"> </h1> 
    <h2 class="text-center"> <b>Current Temperature</b> </h2>
      <h1 class="text-center text-info" id='temperature'> </h1>
      </div>
      </div> 
   <div>
</div>
  </body>
</html>

＆＃13;

$ .getJSON突然无法正常工作

0 个答案: