使用IMDB API运行搜索时,我得到了UNDEFINED。
当我使用设计为返回一个结果的?t =运行搜索时,但是当我使用新的搜索功能运行搜索时?s =它意味着显示多个结果。
例如,如果我搜索星球大战,它应该返回所有带有星球大战的标题,但它显示未定义。我相信我需要一个或多个声明,但我不知道如何编写它。
下面的代码
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<!--Start StyleSheets and Java Code imports-->
<link rel="stylesheet" type="text/css" href="Images_StyleSheets/HomePageStyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#SampleSearchButton").click(function() {
getImdbInfo($("#Title").val());
})
});
//The function below takes the entered title and searchs imdb for a match then it displays as followed
function getImdbInfo(Title) {
var url = "http://www.omdbapi.com/?s=" + Title;
$.ajax({
url: url,
cache: false,
dataType: "jsonp",
success: function(data) {
console.log(data);
var str = "";
str += "<p>Title :" +data.Title+ "</p>";
str += "<p>Year :" +data.Year+ "</p>";
$("#SampleResults").html(str);
},
error: function (request, status, error) { alert(status + ", " + error); }
});
}
</script>
</head>
<body>
<center>
<input id="Title" type="text" value="" />
<input id="SampleSearchButton" type="button" value="SearchSample"/>
<br />
</center>
<div id="SampleResults">
</div>
</body>
</html>
答案 0 :(得分:1)
HTML + JS + jQuery
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#SampleSearchButton").click(function() {
getImdbInfo($("#title").val());
})
});
// The function below takes the entered title and searchs imdb for a match then it displays as followed
function getImdbInfo(Title) {
$.ajax({
url: "http://www.omdbapi.com/?s=" + Title,
cache: false,
dataType: "json",
success: function(data) {
// you get an object for iteration, the keys are Title, Type, Year, imdbID
console.log(data);
var str = '<table>';
str += "<thead><th>Index</th><th>Title</th><th>Type</th><th>Year</th><th>imdbID</th></thead>"
// iterate over the data result set
$.each(data.Search, function(index, element) {
str += "<tr>";
str += "<td>" + index + "</td>";
str += "<td>" + element.Title + "</td>";
str += "<td>" + element.Type + "</td>";
str += "<td>" + element.Year + "</td>";
str += "<td>" + element.imdbID + "</td>";
str += "</tr>";
});
str += '</table>';
// insert the html
$("#SampleResults").html(str);
},
error: function (request, status, error) { alert(status + ", " + error); }
});
}
</script>
</head>
<body>
<!-- search textbox -->
<input type="text" id="title" placeholder="heat">
<!-- do search button -->
<button type="text" id="SampleSearchButton">Search</button>
<!-- display results container -->
<div id="SampleResults"></div>
</body>
</html>
<强>结果强>