2017-04-17 4 views
0

Ich versuche, Titel von einem API abzurufen, aber einen Fehler zu bekommen. Dies ist mein 3. Mal mit Ajax. Bitte lassen Sie mich wissen, wo ich falsch mache.Ajax-Abfrage zum Abrufen von JSON-Daten

Hier ist mein Code.

<!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> 

Ich bin mit diesem API

Bitte lassen Sie mich wissen, wie ich den Fehler beheben kann.

+0

* "aber einige Fehler" * ... welcher Fehler? Sei genau! Nehmen Sie sich Zeit zum Durchlesen von [fragen] – charlietfl

+0

Jsonp ist kein Datentyp – Vivick

+0

@Vivick es ist sicherlich – charlietfl

Antwort

0

Löschen Sie den Datentyp p in. JSONP verweist auf JSON-Auffüllung. Es ist auch eine gute Methode, eine Fehlerfunktion zu verwenden, damit Sie Daten sehen können, selbst wenn sie fehlschlägt:

$.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

_ "Drop die p in Datentyp. JSONP bezieht sich auf JSON Padding" _ Und warum? Und ein Fehler-Handler mit nur einem Parameter wird Ihnen nichts nützliches sagen ... – Andreas

+0

Danke Es funktioniert, aber ich bekomme nicht die Daten in HTML. In der Konsole bekomme ich. Kannst du mir damit helfen. –

+0

Das zurückgegebene Objekt verfügt über Parameter. so in Ihrer jquery sollte es Daten wie zeigen: result.director, result.show_cast, etc –

Verwandte Themen