这些突然出现的控制台错误消息是什么意思？
What do these sudden appearances of console error messages mean?
var sendTitle = function() {
var title = $("input[name='movie-search-title']").val();
getMovie(title)
getQuotes(title)
}
$("input[name='movie-search-title']").keydown(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
sendTitle();
}
})
// movie input autocomplete
var searchInput = document.getElementById('searchBox');
var baseUrl = "http://sg.media-imdb.com/suggests/";
var result = document.getElementById('result');
searchInput.addEventListener('keyup', function() {
$("#result").removeClass("hidden");
//clearing blank spaces from input
var cleanInput = searchInput.value.replace(/\s/g, "");
//clearing result div if the input box in empty
if (cleanInput.length === 0) {
result.innerHTML = "";
}
if (cleanInput.length > 0) {
var queryUrl = baseUrl + cleanInput[0].toLowerCase() + "/" +
cleanInput.toLowerCase() +
".json";
$.ajax({
url: queryUrl,
dataType: 'jsonp',
cache: true,
jsonp: false,
jsonpCallback: "imdb$" + cleanInput.toLowerCase()
}).done(function(result) {
//clearing result div if there is a valid response
if (result.d.length > 0) {
result.innerHTML = "";
}
for (var i = 0; i < result.d.length; i++) {
let category = result.d[i].id.slice(0, 2);
if (category === "tt" || category === "nm") {
//row for risplaying one result
let resultRow = document.createElement('p');
resultRow.setAttribute('class', 'resultRow')
//creating and setting description
let description = document.createElement('div');
description.setAttribute('class', 'description');
let name = document.createElement('h4');
let snippet = document.createElement('h5');
if (category === "tt" && result.d[i].y) {
name.innerHTML = result.d[i].l + " (" + result.d[i].y + ")";
let nameText = name.innerHTML
$(name).click(function(e) {
e.preventDefault();
let title = nameText.slice(0, nameText.lastIndexOf(" "))
getMovie(title)
getQuotes(title)
});
} else {
name.innerHTML = result.d[i].l;
let nameText = name.innerHTML
$(name).click(function(e) {
e.preventDefault();
let title = nameText.slice(0, nameText.lastIndexOf(" "))
getMovie(title)
getQuotes(title)
});
}
snippet.innerHTML = result.d[i].s;
$(description).append(name);
$(resultRow).append(description);
$("#result").append(resultRow);
}
}
});
}
});
// primary movie information (API #1)
var getMovie = function(title) {
$("#result").addClass("hidden")
$("#main").removeClass("hidden");
$("#search-form").trigger("reset");
//format the OMDB api url
var apiUrl = `http://www.omdbapi.com/?t=${title}&plot=full&apikey=
//make a request to the url
fetch(apiUrl)
.then(function(response) {
// request was successful
if (response.ok) {
response.json().then(function(movieData) {
// console.log(movieData)
var movieTitle = movieData.Title
getMovieId(movieTitle);
getSoundTrack(movieTitle);
getTrailer(movieTitle);
var movieObj = {
title: movieTitle,
}
var pastSearches = loadPastSearches();
var alreadySearched = false
if (pastSearches) {
pastSearches.forEach(s => {
if (s.title === movieTitle) {
alreadySearched = true;
}
})
}
if (!alreadySearched) {
for (var item of pastSearches) {
let searchEl = document.createElement("a")
let pastSearchTitle = item.title
$(searchEl).text(pastSearchTitle)
$(searchEl).addClass("past-search-item");
$("#past-search-dropdown").append(searchEl)
$(searchEl).click(function(e) {
e.preventDefault();
let title = pastSearchTitle
getMovie(title)
getQuotes(title)
});
}
}
saveSearch(movieObj)
showMovie(movieData);
});
} else {
alert("Error: title not found!");
}
})
.catch(function(error) {
alert("Unable to connect to CineXScore app");
console.log(error)
});
};
// get specialID for other movie details (API #2)
var getMovieId = function(movieTitle) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/find?q=${movieTitle}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(response) {
console.log(response);
var specialId = response.results[0].id
var specialId = specialId.replace("/title/", "")
var specialId = specialId.replace("/", "")
// console.log(specialId)
getMovieImgs(specialId)
getPromos(specialId)
});
}
// get hero image (API #2)
var getPromos = function(specialId) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/get-hero-with-promoted-video?tconst=${specialId}&purchaseCountry=US¤tCountry=US`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(promoData) {
// console.log(promoData);
$("#hero-image").attr("src", promoData.heroImages[0].url)
});
}
// get additional images (API #2)
var getMovieImgs = function(specialId) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/get-images?tconst=${specialId}&limit=25`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(movieImgs) {
// console.log(movieImgs);
$("#cast-image").attr("src", movieImgs.images[0].url);
});
}
// get movie soundtrack (API #3)
var getSoundTrack = function(movieTitle) {
var movieTitle = movieTitle.replaceAll(" ", "")
const settings = {
"async": true,
"crossDomain": true,
"url": `https://shazam.p.rapidapi.com/search?term=${movieTitle}%20soundtrack&locale=en-US&offset=0&limit=5`,
"method": "GET",
"headers": {
"x-rapidapi-host": "shazam.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(soundTrackData) {
// console.log(soundTrackData);
var albumName = soundTrackData.tracks.hits[0].track.title
var albumDetails = soundTrackData.tracks.hits[0].track.subtitle
var albumImg = soundTrackData.tracks.hits[0].track.images.coverart
var albumUrl = soundTrackData.tracks.hits[0].track.url
$("#soundtrack-title").text(albumName)
$("#soundtrack-image").attr("src", albumImg)
$("#soundtrack-link").attr("href", albumUrl)
$("#soundtrack-details").text(albumDetails)
var trackObj = {
name: albumName,
url: albumUrl
};
$("#save-to-favorites").click(function(e) {
e.preventDefault();
saveTrack(trackObj)
});
});
}
// get movie trailer (API #3)
var getTrailer = function(movieTitle) {
var movieTitle = movieTitle.replaceAll(" ", "");
var movieTitle = `${movieTitle}officialtrailer`
const settings = {
"async": true,
"crossDomain": true,
"url": `https://youtube-search-results.p.rapidapi.com/youtube-search/?q=${movieTitle}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "youtube-search-results.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(trailerData) {
// console.log(trailerData);
$("#video-title").text(trailerData.items[0].title)
var embedCode = trailerData.items[0].url.replace("https://www.youtube.com/watch?v=", "")
var trailerLink = `https://www.youtube.com/embed/${embedCode}`
$("#trailer").attr("src", trailerLink)
$("#video-description").text(trailerData.items[0].description)
});
}
// get movie quotes (API #4)
var getQuotes = function(title) {
$("#quote-items").html("");
$("#movie-quotes-heading").removeClass("hidden");
var title = title.replaceAll(" ", "_")
const settings = {
"async": true,
"crossDomain": true,
"url": `https://movie-and-tv-shows-quotes.p.rapidapi.com/quotes/from/${title}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "movie-and-tv-shows-quotes.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(quoteData) {
// console.log(quoteData);
showQuotes(quoteData)
})
.fail(function(xhr, status, error) {
//Ajax request failed.
var errorMessage = xhr.status + ': ' + xhr.statusText
console.log(`Error - ${errorMessage}`);
$("#movie-quotes-heading").addClass("hidden");
});
}
// change the page HTML to show movie information
var showMovie = function(movieData) {
$("#movie-title").text(movieData.Title)
$("#year-rating").text(`${movieData.Year}, ${movieData.Rated}`)
$("#genre").text(`${movieData.Genre}`)
$("#synopsis").text(movieData.Plot)
$("#poster").attr("src", movieData.Poster);
$("#cast-list").text(`Main Cast: ${movieData.Actors}`)
$("#director").text(`Director: ${movieData.Director}`)
$("#writer").text(`Writer(s): ${movieData.Writer}`)
$("#imdb-rate").text(`${movieData.Ratings[0].Source} - ${movieData.Ratings[0].Value}`)
$("#tomatoes-rate").text(`${movieData.Ratings[1].Source} - ${movieData.Ratings[1].Value}`)
$("#metacritic-rate").text(`${movieData.Ratings[2].Source} - ${movieData.Ratings[2].Value}`)
var tomatoesRate = (movieData.Ratings[1].Value).replace("%", "")
parseInt(tomatoesRate)
if (tomatoesRate <= 60) {
$("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/351-3516739_cherry-tomato-clipart-tomatoe-rotten-tomatoes-icon-png.png")
} else if (tomatoesRate >= 60) {
$("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/50-503981_rotten-tomatoes-fresh-logo.png")
}
}
// if there are famous quotes display those on page
var showQuotes = function(quoteData) {
$("#movie-quotes-heading").text("Movie Quotes")
quoteData.forEach(quoteItem => {
var carouselItem = document.createElement("div")
$(carouselItem).html(`<h4 class='quote'>"${quoteItem.quote}"<br><br><span class='quote-character'>-${quoteItem.character}</span></h4><br>`)
$(carouselItem).appendTo("#quote-items");
});
}
// save past search
var saveSearch = function(movieObj) {
var pastSearches = loadPastSearches();
pastSearches.push(movieObj);
localStorage.setItem("movieObjects", JSON.stringify(pastSearches))
}
loadPastSearches = function() {
var pastSearches = JSON.parse(localStorage.getItem("movieObjects"));
if (!pastSearches || !Array.isArray(pastSearches)) {
var pastSearches = []
}
return pastSearches;
}
// dropdown favorite soundtrack buttons
var saveTrack = function(trackObj) {
var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
if (!faveTracks || !Array.isArray(faveTracks)) {
var faveTracks = []
}
var alreadySearched = false
if (faveTracks) {
faveTracks.forEach(t => {
if (t.name === trackObj.name) {
alreadySearched = true;
}
})
}
if (!alreadySearched) {
let trackEl = document.createElement("a")
$(trackEl).addClass("fave-track");
$(trackEl).text(trackObj.name);
$(trackEl).attr("href", trackObj.url);
$(trackEl).attr("target", "_blank")
$("#favorite-tracks-dropdown").append(trackEl)
}
faveTracks.push(trackObj);
localStorage.setItem("trackObjects", JSON.stringify(faveTracks))
}
// populate favorites list when page loads
var populateFavorites = function() {
var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
if (!faveTracks || !Array.isArray(faveTracks)) {
var faveTracks = []
}
for (var track of faveTracks) {
let trackEl = document.createElement("a")
$(trackEl).addClass("fave-track");
$(trackEl).text(track.name);
$(trackEl).attr("href", track.url);
$(trackEl).attr("target", "_blank")
$("#favorite-tracks-dropdown").append(trackEl)
}
}
$(window).load(populateFavorites())
// clear searches and favorite tracks
$("#clear-searches").click(function(e) {
e.preventDefault();
[...$(".past-search-item")].map(thisSearch => thisSearch.remove());
localStorage.removeItem("movieObjects");
});
$("#clear-favorites").click(function(e) {
e.preventDefault();
[...$(".fave-track")].map(thisTrack => thisTrack.remove());
localStorage.removeItem("trackObjects");
});
/* KEEP THIS CLASS */
.hidden {
display: none;
}
/* IMPORTANT FOR JS */
/* Styling I added (can change) */
#cast-image {
width: 80%;
height: 80%;
}
#tomatoes-rate-image {
width: 80%;
height: 80%;
}
#soundtrack-image {
width: 60%;
height: 60%;
}
#video-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.navbar {
display: flex;
flex-direction: row;
margin-bottom: 0;
background-color: #40376E;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #40376E;
}
/* end of my own styling */
/* all from template */
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #40376E;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
form {
width: 100%;
display: flex;
gap: 20px;
flex-direction: row;
}
#results {
display: flex;
flex-direction: column;
justify-content: left;
width: 20%;
text-align: left;
color: antiquewhite;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #40376E;
font-size: 50px;
}
.logo {
color: #40376E;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CineXScore</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- Navigation Menu -->
<nav class="navbar navbar-default navbar-fixed-top">
<a id="logo" class="navbar-brand">CineXScore</a>
<div class="dropdown navbar-brand">Past Searches
<i class="fa fa-caret-down"></i>
<div id="past-search-dropdown" class="dropdown-content">
<a id="clear-searches">Clear</a>
</div>
</div>
<div class="dropdown navbar-brand">Favorite Tracks
<i class="fa fa-caret-down"></i>
<div id="favorite-tracks-dropdown" class="dropdown-content">
<a id="clear-favorites">Clear</a>
</div>
</div>
</nav>
<!-- Movie Search Section -->
<div id="movie-search" class="jumbotron text-center">
<h1>Search for a movie!</h1>
<form id="search-form">
<input id="searchBox" name="movie-search-title" type="text" class="form-control" size="50" placeholder="movie title" />
<button id="searchBtn" type='button' class="btn btn-danger" onclick="sendTitle()">Search</button>
</form>
<div id="result"></div>
</div>
<!-- hero image -->
<div id="hero">
<img id="hero-image" src="" />
</div>
<main id="main" class=hidden>
<!-- Container (primary movie info) -->
<div id="movie-info" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2 id="movie-title"></h2><br>
<h4 id="year-rating"></h4>
<h4 id="genre"></h4><br>
<p id="synopsis"></p>
<br><button href="#soundtrack" id="get-soundtrack" class="btn btn-default btn-lg">Get the soundtrack</button>
</div>
<div class="col-sm-4">
<span id="movie-poster">
<img id="poster" src="" />
</span>
</div>
</div>
</div>
<!-- Container (cast) -->
<div id="cast" class="container-fluid bg-grey">
<div class="row">
<div id="cast-icon" class="col-sm-4">
<span>
<img id="cast-image" src="https://cdn-icons-png.flaticon.com/512/3873/3873990.png" />
</span>
</div>
<div class="col-sm-8">
<h2>Cast</h2><br>
<h4 id="cast-list"></h4><br>
<p id="director">
</p>
<p id="writer">
</p>
</div>
</div>
</div>
<!-- Container (Score Section) -->
<div id="rating" class="container-fluid">
<div class="row">
<div class="col-sm-4">
<span id="rating-img">
<img id="tomatoes-rate-image" src="https://www.pinpng.com/pngs/m/339-3397388_movie-film-clipart-png-download-film-reel-clip.png"/>
</span>
</div>
<div class="col-sm-8 text-center">
<h2>SCORE</h2><br>
<h4 id="imdb-rate"></h4><br>
<h4 id="tomatoes-rate"></h4><br>
<h4 id="metacritic-rate"></h4><br>
</div>
</div>
</div>
<!-- Container (Sountrack Section) -->
<div id="soundtrack" class="container-fluid text-center bg-grey">
<h2>Soundtrack</h2><br>
<h4 id="soundtrack-title"></h4>
<div class="container-fluid text-center">
<a id="soundtrack-link" href="" target="_blank">
<img id="soundtrack-image" src="https://www.pinclipart.com/picdir/middle/572-5727023_icon-music-and-film-clipart.png" />
</a>
<p id="soundtrack-details"></p>
<button id="save-to-favorites" class="btn btn-default btn-lg">Save to favorites!</button>
</div>
</div>
<!-- Container (Movie Quotes Section)-->
<div id="movie-quotes" class="container-fluid text-center">
<h2 id="movie-quotes-heading"></h2>
<div id="quote-items" class="carousel slide text-center" data-ride="carousel"></div>
</div>
<!-- Container (Trailer Section)-->
<div id=video-container>
<h4 id="video-title"></h4>
<iframe id="trailer" width="860" height="615" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p id="video-description"></p>
</div>
<!-- Footer -->
<footer class="container-fluid text-center">
<a href="#top" title="To Top">
<span class="glyphicon glyphicon-chevron-up"> Top </span>
</a>
</footer>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</html>
谁能给我解释一下第一条和最后两条控制台错误消息是什么意思？在我的应用程序之前运行良好之后，它们随机开始出现在我的应用程序中。我对为什么突然出现这些错误感到困惑。我知道 404 错误是什么，但我不明白第一个消息（jquery 脚本有问题）和最后两个错误消息的突然出现（被客户端阻止）。如果有人对这些意味着什么以及如何解决它们有任何见解，我将不胜感激。
第一个错误与您 script.js 中的 $(window).load(populateFavorites()); 有关。
您正在使用 jQuery 的 3.5.1 版，.load() 已在 3.0 版中删除。
你可以换成$(window).on("load", populateFavorites);就可以了
最后两个错误看起来与使用 Adblocker 有关（尝试禁用它，刷新页面，并检查错误是否仍然存在）。
var sendTitle = function() {
var title = $("input[name='movie-search-title']").val();
getMovie(title)
getQuotes(title)
}
$("input[name='movie-search-title']").keydown(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
sendTitle();
}
})
// movie input autocomplete
var searchInput = document.getElementById('searchBox');
var baseUrl = "http://sg.media-imdb.com/suggests/";
var result = document.getElementById('result');
searchInput.addEventListener('keyup', function() {
$("#result").removeClass("hidden");
//clearing blank spaces from input
var cleanInput = searchInput.value.replace(/\s/g, "");
//clearing result div if the input box in empty
if (cleanInput.length === 0) {
result.innerHTML = "";
}
if (cleanInput.length > 0) {
var queryUrl = baseUrl + cleanInput[0].toLowerCase() + "/" +
cleanInput.toLowerCase() +
".json";
$.ajax({
url: queryUrl,
dataType: 'jsonp',
cache: true,
jsonp: false,
jsonpCallback: "imdb$" + cleanInput.toLowerCase()
}).done(function(result) {
//clearing result div if there is a valid response
if (result.d.length > 0) {
result.innerHTML = "";
}
for (var i = 0; i < result.d.length; i++) {
let category = result.d[i].id.slice(0, 2);
if (category === "tt" || category === "nm") {
//row for risplaying one result
let resultRow = document.createElement('p');
resultRow.setAttribute('class', 'resultRow')
//creating and setting description
let description = document.createElement('div');
description.setAttribute('class', 'description');
let name = document.createElement('h4');
let snippet = document.createElement('h5');
if (category === "tt" && result.d[i].y) {
name.innerHTML = result.d[i].l + " (" + result.d[i].y + ")";
let nameText = name.innerHTML
$(name).click(function(e) {
e.preventDefault();
let title = nameText.slice(0, nameText.lastIndexOf(" "))
getMovie(title)
getQuotes(title)
});
} else {
name.innerHTML = result.d[i].l;
let nameText = name.innerHTML
$(name).click(function(e) {
e.preventDefault();
let title = nameText.slice(0, nameText.lastIndexOf(" "))
getMovie(title)
getQuotes(title)
});
}
snippet.innerHTML = result.d[i].s;
$(description).append(name);
$(resultRow).append(description);
$("#result").append(resultRow);
}
}
});
}
});
// primary movie information (API #1)
var getMovie = function(title) {
$("#result").addClass("hidden")
$("#main").removeClass("hidden");
$("#search-form").trigger("reset");
//format the OMDB api url
var apiUrl = `http://www.omdbapi.com/?t=${title}&plot=full&apikey=
//make a request to the url
fetch(apiUrl)
.then(function(response) {
// request was successful
if (response.ok) {
response.json().then(function(movieData) {
// console.log(movieData)
var movieTitle = movieData.Title
getMovieId(movieTitle);
getSoundTrack(movieTitle);
getTrailer(movieTitle);
var movieObj = {
title: movieTitle,
}
var pastSearches = loadPastSearches();
var alreadySearched = false
if (pastSearches) {
pastSearches.forEach(s => {
if (s.title === movieTitle) {
alreadySearched = true;
}
})
}
if (!alreadySearched) {
for (var item of pastSearches) {
let searchEl = document.createElement("a")
let pastSearchTitle = item.title
$(searchEl).text(pastSearchTitle)
$(searchEl).addClass("past-search-item");
$("#past-search-dropdown").append(searchEl)
$(searchEl).click(function(e) {
e.preventDefault();
let title = pastSearchTitle
getMovie(title)
getQuotes(title)
});
}
}
saveSearch(movieObj)
showMovie(movieData);
});
} else {
alert("Error: title not found!");
}
})
.catch(function(error) {
alert("Unable to connect to CineXScore app");
console.log(error)
});
};
// get specialID for other movie details (API #2)
var getMovieId = function(movieTitle) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/find?q=${movieTitle}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(response) {
console.log(response);
var specialId = response.results[0].id
var specialId = specialId.replace("/title/", "")
var specialId = specialId.replace("/", "")
// console.log(specialId)
getMovieImgs(specialId)
getPromos(specialId)
});
}
// get hero image (API #2)
var getPromos = function(specialId) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/get-hero-with-promoted-video?tconst=${specialId}&purchaseCountry=US¤tCountry=US`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(promoData) {
// console.log(promoData);
$("#hero-image").attr("src", promoData.heroImages[0].url)
});
}
// get additional images (API #2)
var getMovieImgs = function(specialId) {
const settings = {
"async": true,
"crossDomain": true,
"url": `https://imdb8.p.rapidapi.com/title/get-images?tconst=${specialId}&limit=25`,
"method": "GET",
"headers": {
"x-rapidapi-host": "imdb8.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(movieImgs) {
// console.log(movieImgs);
$("#cast-image").attr("src", movieImgs.images[0].url);
});
}
// get movie soundtrack (API #3)
var getSoundTrack = function(movieTitle) {
var movieTitle = movieTitle.replaceAll(" ", "")
const settings = {
"async": true,
"crossDomain": true,
"url": `https://shazam.p.rapidapi.com/search?term=${movieTitle}%20soundtrack&locale=en-US&offset=0&limit=5`,
"method": "GET",
"headers": {
"x-rapidapi-host": "shazam.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(soundTrackData) {
// console.log(soundTrackData);
var albumName = soundTrackData.tracks.hits[0].track.title
var albumDetails = soundTrackData.tracks.hits[0].track.subtitle
var albumImg = soundTrackData.tracks.hits[0].track.images.coverart
var albumUrl = soundTrackData.tracks.hits[0].track.url
$("#soundtrack-title").text(albumName)
$("#soundtrack-image").attr("src", albumImg)
$("#soundtrack-link").attr("href", albumUrl)
$("#soundtrack-details").text(albumDetails)
var trackObj = {
name: albumName,
url: albumUrl
};
$("#save-to-favorites").click(function(e) {
e.preventDefault();
saveTrack(trackObj)
});
});
}
// get movie trailer (API #3)
var getTrailer = function(movieTitle) {
var movieTitle = movieTitle.replaceAll(" ", "");
var movieTitle = `${movieTitle}officialtrailer`
const settings = {
"async": true,
"crossDomain": true,
"url": `https://youtube-search-results.p.rapidapi.com/youtube-search/?q=${movieTitle}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "youtube-search-results.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(trailerData) {
// console.log(trailerData);
$("#video-title").text(trailerData.items[0].title)
var embedCode = trailerData.items[0].url.replace("https://www.youtube.com/watch?v=", "")
var trailerLink = `https://www.youtube.com/embed/${embedCode}`
$("#trailer").attr("src", trailerLink)
$("#video-description").text(trailerData.items[0].description)
});
}
// get movie quotes (API #4)
var getQuotes = function(title) {
$("#quote-items").html("");
$("#movie-quotes-heading").removeClass("hidden");
var title = title.replaceAll(" ", "_")
const settings = {
"async": true,
"crossDomain": true,
"url": `https://movie-and-tv-shows-quotes.p.rapidapi.com/quotes/from/${title}`,
"method": "GET",
"headers": {
"x-rapidapi-host": "movie-and-tv-shows-quotes.p.rapidapi.com",
"x-rapidapi-key":
}
};
$.ajax(settings).done(function(quoteData) {
// console.log(quoteData);
showQuotes(quoteData)
})
.fail(function(xhr, status, error) {
//Ajax request failed.
var errorMessage = xhr.status + ': ' + xhr.statusText
console.log(`Error - ${errorMessage}`);
$("#movie-quotes-heading").addClass("hidden");
});
}
// change the page HTML to show movie information
var showMovie = function(movieData) {
$("#movie-title").text(movieData.Title)
$("#year-rating").text(`${movieData.Year}, ${movieData.Rated}`)
$("#genre").text(`${movieData.Genre}`)
$("#synopsis").text(movieData.Plot)
$("#poster").attr("src", movieData.Poster);
$("#cast-list").text(`Main Cast: ${movieData.Actors}`)
$("#director").text(`Director: ${movieData.Director}`)
$("#writer").text(`Writer(s): ${movieData.Writer}`)
$("#imdb-rate").text(`${movieData.Ratings[0].Source} - ${movieData.Ratings[0].Value}`)
$("#tomatoes-rate").text(`${movieData.Ratings[1].Source} - ${movieData.Ratings[1].Value}`)
$("#metacritic-rate").text(`${movieData.Ratings[2].Source} - ${movieData.Ratings[2].Value}`)
var tomatoesRate = (movieData.Ratings[1].Value).replace("%", "")
parseInt(tomatoesRate)
if (tomatoesRate <= 60) {
$("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/351-3516739_cherry-tomato-clipart-tomatoe-rotten-tomatoes-icon-png.png")
} else if (tomatoesRate >= 60) {
$("#tomatoes-rate-image").attr("src", "https://www.clipartmax.com/png/full/50-503981_rotten-tomatoes-fresh-logo.png")
}
}
// if there are famous quotes display those on page
var showQuotes = function(quoteData) {
$("#movie-quotes-heading").text("Movie Quotes")
quoteData.forEach(quoteItem => {
var carouselItem = document.createElement("div")
$(carouselItem).html(`<h4 class='quote'>"${quoteItem.quote}"<br><br><span class='quote-character'>-${quoteItem.character}</span></h4><br>`)
$(carouselItem).appendTo("#quote-items");
});
}
// save past search
var saveSearch = function(movieObj) {
var pastSearches = loadPastSearches();
pastSearches.push(movieObj);
localStorage.setItem("movieObjects", JSON.stringify(pastSearches))
}
loadPastSearches = function() {
var pastSearches = JSON.parse(localStorage.getItem("movieObjects"));
if (!pastSearches || !Array.isArray(pastSearches)) {
var pastSearches = []
}
return pastSearches;
}
// dropdown favorite soundtrack buttons
var saveTrack = function(trackObj) {
var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
if (!faveTracks || !Array.isArray(faveTracks)) {
var faveTracks = []
}
var alreadySearched = false
if (faveTracks) {
faveTracks.forEach(t => {
if (t.name === trackObj.name) {
alreadySearched = true;
}
})
}
if (!alreadySearched) {
let trackEl = document.createElement("a")
$(trackEl).addClass("fave-track");
$(trackEl).text(trackObj.name);
$(trackEl).attr("href", trackObj.url);
$(trackEl).attr("target", "_blank")
$("#favorite-tracks-dropdown").append(trackEl)
}
faveTracks.push(trackObj);
localStorage.setItem("trackObjects", JSON.stringify(faveTracks))
}
// populate favorites list when page loads
var populateFavorites = function() {
var faveTracks = JSON.parse(localStorage.getItem("trackObjects"));
if (!faveTracks || !Array.isArray(faveTracks)) {
var faveTracks = []
}
for (var track of faveTracks) {
let trackEl = document.createElement("a")
$(trackEl).addClass("fave-track");
$(trackEl).text(track.name);
$(trackEl).attr("href", track.url);
$(trackEl).attr("target", "_blank")
$("#favorite-tracks-dropdown").append(trackEl)
}
}
$(window).load(populateFavorites())
// clear searches and favorite tracks
$("#clear-searches").click(function(e) {
e.preventDefault();
[...$(".past-search-item")].map(thisSearch => thisSearch.remove());
localStorage.removeItem("movieObjects");
});
$("#clear-favorites").click(function(e) {
e.preventDefault();
[...$(".fave-track")].map(thisTrack => thisTrack.remove());
localStorage.removeItem("trackObjects");
});
/* KEEP THIS CLASS */
.hidden {
display: none;
}
/* IMPORTANT FOR JS */
/* Styling I added (can change) */
#cast-image {
width: 80%;
height: 80%;
}
#tomatoes-rate-image {
width: 80%;
height: 80%;
}
#soundtrack-image {
width: 60%;
height: 60%;
}
#video-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.navbar {
display: flex;
flex-direction: row;
margin-bottom: 0;
background-color: #40376E;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #40376E;
}
/* end of my own styling */
/* all from template */
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #40376E;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
form {
width: 100%;
display: flex;
gap: 20px;
flex-direction: row;
}
#results {
display: flex;
flex-direction: column;
justify-content: left;
width: 20%;
text-align: left;
color: antiquewhite;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #40376E;
font-size: 50px;
}
.logo {
color: #40376E;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CineXScore</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- Navigation Menu -->
<nav class="navbar navbar-default navbar-fixed-top">
<a id="logo" class="navbar-brand">CineXScore</a>
<div class="dropdown navbar-brand">Past Searches
<i class="fa fa-caret-down"></i>
<div id="past-search-dropdown" class="dropdown-content">
<a id="clear-searches">Clear</a>
</div>
</div>
<div class="dropdown navbar-brand">Favorite Tracks
<i class="fa fa-caret-down"></i>
<div id="favorite-tracks-dropdown" class="dropdown-content">
<a id="clear-favorites">Clear</a>
</div>
</div>
</nav>
<!-- Movie Search Section -->
<div id="movie-search" class="jumbotron text-center">
<h1>Search for a movie!</h1>
<form id="search-form">
<input id="searchBox" name="movie-search-title" type="text" class="form-control" size="50" placeholder="movie title" />
<button id="searchBtn" type='button' class="btn btn-danger" onclick="sendTitle()">Search</button>
</form>
<div id="result"></div>
</div>
<!-- hero image -->
<div id="hero">
<img id="hero-image" src="" />
</div>
<main id="main" class=hidden>
<!-- Container (primary movie info) -->
<div id="movie-info" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2 id="movie-title"></h2><br>
<h4 id="year-rating"></h4>
<h4 id="genre"></h4><br>
<p id="synopsis"></p>
<br><button href="#soundtrack" id="get-soundtrack" class="btn btn-default btn-lg">Get the soundtrack</button>
</div>
<div class="col-sm-4">
<span id="movie-poster">
<img id="poster" src="" />
</span>
</div>
</div>
</div>
<!-- Container (cast) -->
<div id="cast" class="container-fluid bg-grey">
<div class="row">
<div id="cast-icon" class="col-sm-4">
<span>
<img id="cast-image" src="https://cdn-icons-png.flaticon.com/512/3873/3873990.png" />
</span>
</div>
<div class="col-sm-8">
<h2>Cast</h2><br>
<h4 id="cast-list"></h4><br>
<p id="director">
</p>
<p id="writer">
</p>
</div>
</div>
</div>
<!-- Container (Score Section) -->
<div id="rating" class="container-fluid">
<div class="row">
<div class="col-sm-4">
<span id="rating-img">
<img id="tomatoes-rate-image" src="https://www.pinpng.com/pngs/m/339-3397388_movie-film-clipart-png-download-film-reel-clip.png"/>
</span>
</div>
<div class="col-sm-8 text-center">
<h2>SCORE</h2><br>
<h4 id="imdb-rate"></h4><br>
<h4 id="tomatoes-rate"></h4><br>
<h4 id="metacritic-rate"></h4><br>
</div>
</div>
</div>
<!-- Container (Sountrack Section) -->
<div id="soundtrack" class="container-fluid text-center bg-grey">
<h2>Soundtrack</h2><br>
<h4 id="soundtrack-title"></h4>
<div class="container-fluid text-center">
<a id="soundtrack-link" href="" target="_blank">
<img id="soundtrack-image" src="https://www.pinclipart.com/picdir/middle/572-5727023_icon-music-and-film-clipart.png" />
</a>
<p id="soundtrack-details"></p>
<button id="save-to-favorites" class="btn btn-default btn-lg">Save to favorites!</button>
</div>
</div>
<!-- Container (Movie Quotes Section)-->
<div id="movie-quotes" class="container-fluid text-center">
<h2 id="movie-quotes-heading"></h2>
<div id="quote-items" class="carousel slide text-center" data-ride="carousel"></div>
</div>
<!-- Container (Trailer Section)-->
<div id=video-container>
<h4 id="video-title"></h4>
<iframe id="trailer" width="860" height="615" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p id="video-description"></p>
</div>
<!-- Footer -->
<footer class="container-fluid text-center">
<a href="#top" title="To Top">
<span class="glyphicon glyphicon-chevron-up"> Top </span>
</a>
</footer>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</html>
谁能给我解释一下第一条和最后两条控制台错误消息是什么意思？在我的应用程序之前运行良好之后，它们随机开始出现在我的应用程序中。我对为什么突然出现这些错误感到困惑。我知道 404 错误是什么，但我不明白第一个消息（jquery 脚本有问题）和最后两个错误消息的突然出现（被客户端阻止）。如果有人对这些意味着什么以及如何解决它们有任何见解，我将不胜感激。
第一个错误与您 script.js 中的 $(window).load(populateFavorites()); 有关。
您正在使用 jQuery 的 3.5.1 版，.load() 已在 3.0 版中删除。
你可以换成$(window).on("load", populateFavorites);就可以了
最后两个错误看起来与使用 Adblocker 有关（尝试禁用它，刷新页面，并检查错误是否仍然存在）。