weixin_33713503 2017-12-23 08:02 采纳率: 0%
浏览 71

JavaScript资源错误

I'm encountering an error in Chrome's console where it returns:

Failed to load resource: the server responded with a status of 404 (Not Found)

I've read other posts related to this and how it may be the path that I specified is where the error is occurring. But since I don't have much experience with this, I can't seem to find where the error is. The script.js file may look a bit weird since it's compiled from a TypeScript file. Another error that I'm encountering is that when I load the HTML page and then refresh it, the error is a bit different. The different error is:

GET http://localhost:63342/WeatherWizard/src/html/api.openweathermap.org/data/2.5/forecast?lat=49.1438509&lon=-123.11269889999998 404 (Not Found) send @ bundle.js:9666 ajax @ bundle.js:9273 jQuery.(anonymous function) @ bundle.js:9422 getJSON @ bundle.js:9403 (anonymous) @ bundle.js:32 locationSuccess @ bundle.js:31

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>WeatherWizard</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale = 1">
    <link   rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">        <!-- Makes me host Bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/4c5e04f914.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
    <script src="../js/bundle.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1 id="filler">Weather Wizard</h1>
        <p>Finding your local weather!</p>
        <!-- Your current location is: -->
        <p id="currentCity">hello where is this</p>
    </div>

    <nav class="navbar">
        <div class="d-flex justify-content-end">    <!-- TODO: don't know if it should be justify-content-end or justify-content-start // both give the same result -->
            <div class="container-fluid">
                <div class="navbear-header">
                    <a class="navbar-brand" href="">WeatherWizard27</a>
                </div>
            </div>
        </div>

        <form class="form-inline">
            <div class="form-group">
                <input class="form-control" type="text"  placeholder="Location">
                <div class="input-group-btn">
                    <button class="btn btn-outline-success my-2 my-sm 0" type="submit">
                        <i class="fa fa-search" aria-hidden="true"> Search</i>      <!-- TODO: change to boostrap's font-->
                    </button>
                </div>
            </div>
        </form>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col">
                <h2>Monday</h2>
            </div>
            <div class="col">
                <h2>Tuesday</h2>
            </div>
            <div class="col">
                <h2>Wednesday</h2>
            </div>
            <div class="col">
                <h2>Thursday</h2>
            </div>
            <div class="col">
                <h2>Friday</h2>
            </div>
        </div>
    </div>
</body>

script.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const WeatherData_1 = require("./WeatherData");
const $ = require("jquery");
$(document).ready(function () {
var deg = 'c';
var weatherDiv = $('#weather');
var location = $('p.location');
getLocation();
function getLocation() {
    document.getElementById("filler").innerHTML = "is this showing up?";
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
    }
    else {
        showError("Your browser does not support Geolocation!");
    }
}
function locationSuccess(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    try {
        return new Promise(function (resolve, reject) {
            $.getJSON("api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon, function (weatherResponse) {
                resolve(weatherResponse);
            });
        }).then(function (weatherResponse) {
            var weatherData = new WeatherData_1.WeatherData();
            var assignedWeatherData = setWeatherDataHelper(weatherData, weatherResponse);
            displayCurrentCity(assignedWeatherData);
        });
    }
    catch (err) {
        showError("We can't find information about your city!");
    }
}
;
function setWeatherDataHelper(weatherData, weatherResponse) {
    var date = new Date();
    console.log("created a new Date object");
    weatherData.date = formatTimeIntoAMPM(date);
    weatherData.city = weatherResponse.city.name;
    weatherData.country = weatherResponse.country;
    weatherData.temperature = weatherResponse.list.main.temp;
    weatherData.minTemperature = weatherResponse.list.main.temp_min;
    weatherData.maxTemperature = weatherResponse.list.main.temp_max;
    weatherData.weather = weatherResponse.list.weather.id;
    weatherData.weatherIcon = weatherResponse.list.weather.icon;
    return weatherData;
}
function locationError(error) {
    switch (error.code) {
        case error.TIMEOUT:
            showError("A timeout occurred! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}
;
function showError(msg) {
    weatherDiv.addClass('error').html(msg);
}
;
function formatTimeIntoAMPM(date) {
    console.log("got into format time method");
    var minutes = date.getMinutes.toString().length === 1 ? '0' + date.getMinutes() : date.getMinutes();
    var hours = date.getHours().toString().length == 1 ? '0' + date.getHours() : date.getHours();
    var ampm = date.getHours() >= 12 ? 'pm' : 'am';
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var combinedDate = date.getDay() + ' ' + months[date.getMonth()] + ' ' + date.getDate() + ' ' + hours + minutes + ampm;
    return combinedDate;
}
;
function displayWeatherData(assignedWeatherData) {
}
;
function displayCurrentCity(assignedWeatherData) {
    console.log("got into displayCurrentCity method");
    var element = document.getElementById("currentCity");
    element.innerHTML = assignedWeatherData.city + ", " + assignedWeatherData.country;
}
});
//# sourceMappingURL=script.js.map
  • 写回答

2条回答 默认 最新

  • weixin_33697898 2017-12-23 08:11
    关注

    You should probably use an absolute url for external resources

    change

    $.getJSON("api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon, function (weatherResponse) {
           resolve(weatherResponse);
    });
    

    to

    $.getJSON("https://api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon, function (weatherResponse) {
           resolve(weatherResponse);
    });
    

    or simply

    $.getJSON("//api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon, function (weatherResponse) {
           resolve(weatherResponse);
    });
    
    评论

报告相同问题?

悬赏问题

  • ¥15 如何输入百度,显示本地下载的html文件页面,地址栏还显示百度的地址
  • ¥15 通过kinect制作换装程序但是服装不贴合(标签-ar)
  • ¥20 matlab如何绘制三维瀑布图
  • ¥15 关于用abap来解决动态规划的问题,但是要求输出索引值,这个是难点
  • ¥15 在ISIS中什么是IP从地址
  • ¥15 压测时,并发量过高时,响应时间出现尖刺
  • ¥15 关于vmprotect3.8.4虚拟文件一项
  • ¥15 在不用IT调试的情况下怎样能连外网
  • ¥20 C#调用虚拟键盘TabTip.exe
  • ¥15 Qt4代码实现下面的界面