2012-04-02 127 views
5

我正在使用位于此处的IMDb API v2.0,并且我决定对其进行测试。我不能。我认为这是来自外部网站的跨浏览器AJAX请求,但我不知道任何其他方式。例如,这里的测试在imdbapi avatar使用jQuery的外部API GET()请求

请参阅?这是我的代码。

<!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" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 


    <title>IMDB api</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() 
{ 
    $('#movie').keyup(function() { 

     var yourMovie = $("#movie").val(); 
    $("#debug").append("You are searching for ... "+yourMovie+"\n"); 

dataString = "t=Avatar"; 

$.ajax({ 
type: "GET", 
url: "http://www.imdbapi.com/", 
cache: false, 
data: dataString, 

success: function(html){ 
//$("#more").after(html); 
alert("Success!"); 
} 

}); 
}); 
}); 
</script> 

</head> 
<body> 


<form action="#" method="get" enctype="text/html" > 
<input type="text" id="movie" maxlength="50" /> 

</form> 

<div id="other"> 
    Trigger the handler 
</div> 
<br /> 
<textarea id="debug" style="width: 500px;height:150px;border:1px solid black;font-face:typewriter;"></textarea><br /> 
<textarea id="more" style="width: 500px;height:150px;border:1px solid red;font-face:typewriter;"></textarea> 

</body> 
</html> 

我正在使用谷歌浏览器。

下面是我工作:

<script type="text/javascript"> 
    $(document).ready(function() 
{ 
    $('#movie').keyup(function() { 

     var yourMovie = $("#movie").val(); 
    $("#debug").append("You are searching for ... "+yourMovie+"\n"); 

dataString = "callback=?&t=Avatar"; 

$.getJSON('http://www.imdbapi.com/', dataString, function(html){ 
//$("#more").after(html); 
alert("Success!"); 
}); 


}); 
}); 
</script> 

回答

3

替换:

$.ajax({ 
type: "GET", 
url: "http://www.imdbapi.com/", 
cache: false, 
data: dataString, 

success: function(html){ 
//$("#more").after(html); 
alert("Success!"); 
} 
}); 

随着

$.getJSON('http://www.imdbapi.com/?' + dataString, function(json_data){ 
alert(JSON.stringify(json_data)); 
}); 
+0

将无法​​正常工作,它是跨域 – 2012-04-02 22:47:17

+0

啊哈,我现在明白了。谢谢。我知道我使用的是错误的。 – nn2 2012-04-02 22:47:20

+1

@Topener getJSON工作的X域。 [RTFM](http://api.jquery.com/jQuery.getJSON/)。 – iambriansreed 2012-04-02 22:57:39

0

您可以使用jQuery运行跨域的Ajax。在调用点设置crossDomain选项:

http://api.jquery.com/jQuery.ajax/

跨域(增加1.5)Boolean默认值:假的同域请求, 真正的跨域请求。如果你想强制跨域 请求(如JSONP)在相同的域, 跨域的值设置为true

编辑 -

其实,究竟是什么问题?我试过这个,它会正确返回Json。

http://jsfiddle.net/7VcUJ/

响应例如:

HTTP/1.1 200 OK缓存控制:无缓存杂注:无缓存内容类型: text/html的; charset = utf-8过期时间:-1服务器:Microsoft-IIS/7.0 X-AspNet-Version:4.0.30319 X-Powered-by-ASP.NET日期:4月2日,星期一 2012 22:28:14 GMT内容-Length:618

{“Title”:“Avatar”,“Year”:“2009”,“Rated”:“PG-13”,“Released”:“Dec Dec 12:18 Dec 2009”,“Genre” “行动,冒险,幻想,科幻”,“导演”:“詹姆斯 卡梅隆”,“作家”:“詹姆斯卡梅隆”,“演员”:“萨姆沃辛顿,佐伊 萨尔达纳,西格妮韦弗,米歇尔罗德里格斯” “剧情”:“截瘫 海洋派遣到月球潘多拉在一个独特的使命成为撕毁 之间遵循他的命令和保护他的世界,他觉得是他的 家。”,“海报”:“http://ia.media -imdb.com/images/M/MV5 BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw @@ ._ V1_SX320.jpg“,”Runtime“:”2 hrs 42 mins“,”Rating“:”8.1“,”Votes“:”386930“,”ID“:”tt0499549“,”Response“: “True”}

+0

嗯,它仍然无法为我工作。我用undefined类型取消它:i.imgur.com/yWaF6.png – nn2 2012-04-02 22:43:22

3

这是一个跨域的AJAX调用,因此您需要一个回调。 jQuery使这非常简单,只需将?callback=?添加到您的网址。

url: "http://www.imdbapi.com/?" + dataString + "&callback=?" 

跳过data = dataString在这种情况下,使得它更容易(我发现)。

试试这个,进一步继续它:

$.getJSON("http://www.imdbapi.com/?" + dataString + "&callback=?").success(function(data){ 
    console.log(data); // will contain all data (and display it in console) 
}) 

这是一样的:

$.ajax({ 
type: "GET", 
url: "http://www.imdbapi.com/?"+dataString+"&callback=?", 
dataType: 'JSONP' 
success: function(data){ 
    console.log(data); 
} 
+0

嗯,它仍然不适合我。我得到它取消与undefined类型:http://i.imgur.com/yWaF6.png – nn2 2012-04-02 22:39:24

+0

添加额外的信息,我的回答 – 2012-04-02 22:45:39

0

添加callback参数的URL中使用JSONP:

dataString = "t=Avatar&callback=?"; 

使用$将导致jQuery为你自动生成一个回调函数并自动处理响应。

推荐阅读:What is JSONP all about?