个人中心
gpt4 book ai didi

JavaScript 资源错误

转载 作者：行者123 更新时间：2023-12-03 02:49:30 25 4
gpt4 key购买 nike

我在 Chrome 控制台返回错误:

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

我已经阅读了与此相关的其他帖子，以及我指定的路径如何可能是发生错误的位置。但由于我对此没有太多经验，我似乎无法找到错误在哪里。 script.js 文件可能看起来有点奇怪，因为它是从 TypeScript 文件编译的。我遇到的另一个错误是，当我加载 HTML 页面然后刷新它时，错误有点不同。不同的错误是:

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

最佳答案

您可能应该对外部资源使用绝对 URL

改变

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

到

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

或者简单地

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

关于JavaScript 资源错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47950864/

25 4 0
文章推荐： javascript - Angular JS 登录表单登录方法未调用
文章推荐： javascript - React-Redux Action 创建器在 props 上不可用
文章推荐： javascript - Ionic - 将毫秒(长)日期解析为 dd/mm/yyyy
文章推荐： Javascript 链接多个函数而不是传递函数作为参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com