2014-03-30 64 views
0

當使用IMDB API運行搜索時,我得到UNDEFINED。在使用IMBD運行搜索時變得未定義

當我使用?t =進行搜索時,它被設計爲返回一個結果,但是當我使用新的搜索函數運行搜索時,它顯示了多個結果。
例如,如果我運行搜索星球大戰,它應該返回所有帶有星球大戰的標題,但它顯示未定義。我相信我需要每個語句或某個東西,但我不知道如何編寫它。

代碼如下

<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

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

+0

謝謝你這麼多,這是excatly我需要I T ip我的帽子到你 – Jamiex304

+0

不客氣。玩得開心編碼:) –

+0

即時通訊想知道如果你可以幫助我多一點將有可能使用真正的imdb網站獲取信息,所以我可以得到的節目的形象也是這裏是一個url請求的例子http: //www.imdb.com/xml/find?xml=1&nr=1&tt=on&q=star%20wars並按照上面的方式列出它們 – Jamiex304

相關問題