I was building a web page which returns several aspects of a movie from a search form. Essentially you type a movie name and a request is sent to the OMDB API which returns movie details such as title, director, year, poster etc. My biggest problem is that only the Javascript portion of my app appears whilst the html doesn't appear except when the page loads for a millisecond or so and the loading cursor wouldn't go away. Hope someone can give me tips on what went wrong here. Thanks in advance.
Here is my code: the form which redirects me to another page:
<form action="search_Results.html" method="GET">
<input type="text" value="Search..." onFocus="this.value='';" onBlur="if
(this.value == '') {this.value ='';}" name="search_Input"/>
<input type="submit" value="Submit"/>
</form>
Here is my html code:
<!DOCTYPE HTML>
<html>
<head>
<title>Search Results</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<script src = "js\search_Results.js"></script>
</html>
And here is my javascript code:
var queryString = window.location.search;
var q_String = queryString.slice(14);
var final_string = "http://www.omdbapi.com/?t=" + q_String +
"&apikey=3835e1a1";
function apiCall(strings) {
$.getJSON(strings).then(function(response){
console.log(response);
document.write(response.Year);
document.write("<br>");
document.write(response.Title);
document.write("<br>");
var img = document.createElement("img");
img.src = response.Poster;
img.width = 300;
img.height = 438;
img.alt = "N/A";
document.body.appendChild(img);
document.body.style.backgroundImage =
"url('http://www.51tmp.com/d/file/2015/07/25.jpg')";
});
}
apiCall(final_string);
Aucun commentaire:
Enregistrer un commentaire