Javascript “我的天气”应用程序的网页中未显示任何数据_Javascript_Json_Ajax

Javascript “我的天气”应用程序的网页中未显示任何数据

javascript json ajax

Javascript “我的天气”应用程序的网页中未显示任何数据,javascript,json,ajax,Javascript,Json,Ajax,所以我最近一直在做一个天气应用。我测试了我的代码，没有显示温度、国家和当前天气的说明。我认为问题始于我的html地理定位函数。我觉得这个函数无法解析天气api数据我的代码如下： $( document ).ready(function(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "G

所以我最近一直在做一个天气应用。我测试了我的代码，没有显示温度、国家和当前天气的说明。我认为问题始于我的html地理定位函数。我觉得这个函数无法解析天气api数据

我的代码如下：

$( document ).ready(function(){

  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
  } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
  }


  function showPosition(position) {
var lat = "lat= " + position.coords.latitude; 
var lon = "lon= " + position.coords.longitude;
getWeather(lat,lon);
  }

   function getWeather(lat,lon){
var urlstring = "https://fcc-weather-api.glitch.me/api/current?" + lat + "&" + lon;
$.ajax({
    url : urlstring,
    dataType : "jsonP",
    success : function(data){
        var temp = data.main.temp;
        var desc = data.weather[0].description;
        var country = data.sys.country;
        $("#desc").html(desc);
        $("#temp").html(temp);
    }
})
  }

  var ctof = $("#c/f").click(function(){
     var cel = Math.round((temp - 32) * 5 / 9);   
     var faren = Math.round((temp * 9 / 5) + 32);
     if(ctof == true){
        $("#temp").html(faren);
      }
      else{
        $("#temp").html(cel);
      }
        }) 
  });

我甚至包括我的html代码只是为了参考

<!DOCTYPE html>
<html>
<head><title>Web App</title></head>
<body>
<div class="container">
   <div class="row">
     <header class="col-xs-12 text-center">
       <h1>Free Code Camp </h1>
       <h1>Weather App</h1>
     </header>

     <div class="col-xs-8 col-xs-offset-2">
       <div class="text-center status">
         <p><span id="city"></span> <span id="country"></span></p>
         <p><span id="temp"><button id="#c/f">C/F</button></span></p>
         <p id="desc"></p>
       </div>
   <div class ="info">
 <div class="develop">Developed by = Shumaila Bi Shaikh</div>
 <div class="langs">Created by: HTML,CSS,ANGULARJS</div>
 </div>

 <script src="Weather.js"></script>


网络应用
自由代码营
天气应用程序

C/F

开发人=Shumaila Bi Shaikh
创建人：HTML、CSS、ANGULARJS

您是否尝试了

console.log（desc）

或其他数据？我怀疑您获得了所需的数组，但您试图将这些数组直接附加到

html

中，这将不起作用

像这样的台词：

    $("#desc").html(desc);
    $("#temp").html(temp);

除非传递有效的html字符串，如

Hello

，否则这将不起作用，但在本例中，传递的是数组。您需要确定数据的实际显示方式，然后将其传递到

.html（）

调用中

根据您的数据结构，可能是这样的

let descString = "";
desc.forEach(value => descString += "<p>" + value.something + "</p>")
$("#desc").html(descString)

let descString=”“；
desc.forEach（value=>descString+=“”+value.something+“”）
$（“#desc”）.html（descString）

您是否尝试了

console.log（desc）

或其他数据？我怀疑您获得了所需的数组，但您试图将这些数组直接附加到

html

中，这将不起作用

像这样的台词：

    $("#desc").html(desc);
    $("#temp").html(temp);

除非传递有效的html字符串，如

Hello

，否则这将不起作用，但在本例中，传递的是数组。您需要确定数据的实际显示方式，然后将其传递到

.html（）

调用中

根据您的数据结构，可能是这样的

let descString = "";
desc.forEach(value => descString += "<p>" + value.something + "</p>")
$("#desc").html(descString)

let descString=”“；
desc.forEach（value=>descString+=“”+value.something+“”）
$（“#desc”）.html（descString）

您的问题在这一行：

var ctof = $("#c/f").click(function() {

<p><span id="temp"><button id="#c/f">C/F</button></span></p>

当您需要选择具有CSS符号中使用的字符的元素时，您需要将它们转义为前缀\\。有关更多详细信息，请参阅

因此，您需要编写：

var ctof = $("\\#c\\/f").click(function(){

第二个问题是：

var ctof = $("#c/f").click(function() {

<p><span id="temp"><button id="#c/f">C/F</button></span></p>

C/F

当您获得data.main.temp时，您将覆盖并删除该按钮。因此，将行更改为：

<p><span id="temp"></span><button id="#c/f">C/F</button></p>

C/F

为了在Chrome中启用地理定位，您需要如图所示启用它