Ärger mit einigen Openweathermap API Beispielcode

Ich versuche, den folgenden Code auszuführen:Ärger mit einigen Openweathermap API Beispielcode

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() + "&APPID=myweatherkey_removed", 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();

und

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Open Weather API</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
     <div id="userArea" class="container"> 
      <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" class="btn btn-primary"/> 
       <br/> 
      </div> 
      <!- USED TO SHOW RESULT --> 
      <div id="weatherWrapper"> 
      </div> 
     </div> 
     <script type="text/javascript" src="jquery-3.1.1.slim.js"></script> 
     <script type="text/javascript" src="mainWeather.js"></script> 
    </body> 
</html>

aber es wird einfach nichts tun, wenn ich einreichen getroffen.

Der Chrome-Debugger sagt zuerst, dass $ .get keine Funktion in Zeile 9 ist, also ändere ich nach der Suche in jquery.get. Jetzt sagt es, dass das keine Funktion ist. Ich habe keine Ahnung was ich tue. Kann das jemand herausfinden?

Quelle

2016-11-18 Ray Stevens

Die schlanke Bauweise von jQuery schließt Ajax aus. Sie können mehr lesen here.
Ändern Sie es einfach mit dem normalen Build und alles wird gut.

Quelle

2016-11-18 22:35:53 hamza765

Vielen Dank für Ihre Antwort. Das Ausführen mit normaler jQuery führt jedoch zu folgendem Fehler: XMLHttpRequest kann Datei: /// C:/echo/json/nicht laden. Cross-Ursprungsanforderungen werden nur für Protokollschemas unterstützt: http, data, chrome, chrome-extension, https, chrome-extension-resource. –

Sie verwenden das Dateiprotokoll anstelle des HTTP-Protokolls. Verwenden Sie einen lokalen Server und es wird funktionieren. Suchen und installieren Sie XAMPP oder WampServer. Wenn Sie den Fehler lesen: Cross-Ursprungsanforderungen werden nur für Protokollschemata unterstützt: http ... –

Ich glaube nicht, dass Sie den gesamten Code haben. – hamza765

Ärger mit einigen Openweathermap API Beispielcode

Antwort

Verwandte Themen