使用IMDB运行搜索时获取未定义

时间:2014-03-30 21:46:58

标签: javascript jquery html json each

使用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>

1 个答案:

答案 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>

<强>结果

enter image description here