HTML 버튼에 OpenWeather API 데이터가 표시되지 않습니다.

도시와 국가를 입력 한 후 openweather API의 일부 데이터를 표시해야하는 코드를 만들었습니다. 현재 제출 버튼을 클릭 한 후에는 아무 것도하지 않습니다. HTML 버튼에 OpenWeather API 데이터가 표시되지 않습니다.

이

내 HTML 파일입니다 Index.html을 내 코드에서

<head> 
    <title>Open Weather API</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script type="text/javascript" src="mainWeather.js"></script> 
</head> 

<body> 
    <div id="userArea"> 
     <div id="stateWrapper"> 
      <input type="text" id="cityInput" placeholder="Enter a State"/> 
     </div> 
     <br/> 
     <div id="countryWrapper"> 
      <input type="text" id="countryInput" placeholder="Enter a Country"/> 
     </div> 
     <br/> 
     <div id="buttonArea"> 
      <input type="submit" id="submitWeather"/> 
     </div> 
    </div> 
    <!- USED TO SHOW RESULT --> 
    <div id="weatherWrapper"> 
    </div> 
</body>

나는 실제 키 여기

이 내에 "키"를 변경 내 자바 스크립트 파일 : mainWeather.js

var mainWeather = { 
    init: function() { 
     $("#submitWeather").click(function() { 
      return mainWeather.getWeather(); 
     }); 
    }, 

    getWeather: function() { 
     $.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "Key", function (data) { 
      var json = { 
       json: JSON.stringify(data), 
       delay: 1 
      }; 
      echo(json); 
     }); 
    }, 

    //Prints result from the weatherapi, receiving as param an object 
    createWeatherWidg: function (data) { 
     return "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" + 
      "<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" + 
      "<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" + 
      "<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" + 
      "<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" + 
      "<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>"; 
    } 
}; 

var echo = function (dataPass) { 
    $.ajax({ 
     type: "POST", 
     url: "/echo/json/", 
     data: dataPass, 
     cache: false, 
     success: function (json) { 
      var wrapper = $("#weatherWrapper"); 
      wrapper.empty(); 
      wrapper.append("<div class='city'> <p>Place: " + json.name + ", " + json.sys.country + "</p></div>"); 
      wrapper.append(mainWeather.createWeatherWidg(json)); 
     } 
    }); 
}; 

mainWeather.init();

나는 그것이 작동하지 않는 이유를 알아낼 수 없다. 두 파일은 같은 폴더에있다.

출처

2016-08-17 Luke Rayner

콘솔에 오류가 있습니까? 당신은 두 파일이 같은 폴더에 있지만 HTML에서''이 하위 폴더에 있어야 함을 의미합니다. "/ resources/js " – ADyson

아, 죄송합니다. 그 폴더에 있었지만 코드를 옮겨 놓은 것을 잊어 버렸습니다! 코드를 변경했으나 여전히 작동하지 않으며 콘솔에 오류가 없습니다. –

변화

$("#submitWeather").click(function() { 
     return mainWeather.getWeather(); 
    });

$("#submitWeather").click(function (event) { 
     event.preventDefault(); 
     return mainWeather.getWeather(); 
    });

이에 :

event.preventDefault();

다시 게시에서 페이지를 중지합니다. "#submitWeather"는 "submit"유형의 입력이므로 javascript를 실행하기 전에 전체 페이지 다시 게시가 기본적으로 발생합니다.

두 번째로, mainWeather.js의 전체를 $ (function() {...}); 블록. 클릭 이벤트 핸들러가 처리 될 요소가 렌더링되기 전에 설정 중이라는 메시지가 나에게 발생합니다. 블록은 전체 문서가 준비 될 때까지 코드를 대기 상태로 만듭니다.

출처

2016-08-17 14:34:51 ADyson

코드를 추가했지만 여전히 작동하지 않는 것 같습니다. 버튼을 클릭 한 후에 데이터가 표시되지 않습니다. –

mainWeather.js의 전체를 래핑 해보십시오. $ (function() {...}); 블록. 클릭 이벤트 핸들러가 처리 될 요소가 렌더링되기 전에 설정 중이라는 메시지가 나에게 발생합니다. 이 블록은 전체 문서가 준비 될 때까지 코드를 대기 상태로 만듭니다. – ADyson

이번에도 여전히 콘솔/네트워크 탭 오류가 발생합니다 ( –

HTML 버튼에 OpenWeather API 데이터가 표시되지 않습니다.

답변

관련 문제