2017-04-17 66 views
0

我想從一個API獲取標題,但得到一些錯誤。這是我第三次使用ajax。 請讓我知道我在做錯什麼。Ajax查詢獲取JSON數據

這是我的代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Search Movies</title> 
    <style type="text/css"> 
     #movieTemplateContainer div 
     { 
      width:500px; 
      padding: 10px; 
      margin: 10px; 
      border: black solid 1px; 
     } 

    </style> 
</head> 
<body> 
<label>Search Movies:</label> 
<input id="movieName" size="50" /> 
<button id="btnLookup">Lookup</button> 

<div id="movieTemplateContainer"></div> 

    <script id="movieTemplate" type="text/x-jquery-tmpl"> 
<div>  
     <img src="${BoxArt.LargeUrl}" /> 
     <strong>${Name}</strong> 
     </br> 
     <button id="playButton" movieID=${NetflixApiId} onclick="play(this)">Play Now</button> 
     <p> 
     {{html Synopsis}} 
     </p> 
    </div> 
</script> 

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="jquery.tmpl.js"></script> 
    <script type="text/javascript"> 

    $("#btnLookup").click(function() { 

     // Build OData query 
     var movieName = $("#movieName").val(); 
     var query = "http://netflixroulette.net/api/api.php?" // netflix base url 
     + "title=" + escape(movieName) // top-level resour 

     // Make JSONP call to Netflix 
    $.ajax({ 
      dataType: "jsonp", 
      url: query, 
      jsonpCallback: "callback", 
      success: callback 
      }); 
     }); 

    function callback(result) { 
     // unwrap result 
     var movies = result.d.results; 

     $("#movieTemplateContainer").empty(); 
     $("#movieTemplate").tmpl(movies).appendTo("#movieTemplateContainer"); 
    } 

    </script> 


<script src="http://jsapi.netflix.com/us/api/js/api.js"></script> 


</body> 
</html> 

我用這API

請讓我知道我可以修復錯誤。

+0

*「但是出現一些錯誤」* ...出現什麼錯誤?請明確點!請花一些時間閱讀[問] – charlietfl

+0

Jsonp不是數據類型 – Vivick

+0

@Vivick它肯定是 – charlietfl

回答

0

刪除數據類型中的p。 JSONP引用JSON填充。此外它的好做法是包含一個錯誤功能,以便即使它失敗也能看到數據:

$.ajax({ 
      dataType: "json", 
      url: query, 
      jsonpCallback: "callback", 
      success: callback, 
      error: failed 
     }); 
    }); 

    function callback(result) { 
     console.log(result); 
     // unwrap result 
     var movies = result.d.results; 

     $("#movieTemplateContainer").empty(); 
     $("#movieTemplate").tmpl(movies).appendTo("#movieTemplateContainer"); 
    } 

    function failed(xhr, ajaxOptions, thrownError) { 
    alert(xhr.status); 
    alert(thrownError); 
    } 
+0

_「刪除數據類型中的p。JSONP指的是JSON填充」_爲什麼?只有一個參數的錯誤處理程序不會告訴你任何有用的信息... – Andreas

+0

謝謝它正在工作,但我沒有獲取Html中的數據。在控制檯我越來越。你能幫我解決嗎? –

+0

返回的對象具有參數。所以在你的jQuery中它應該顯示如下數據: result.director,result.show_cast等 –