GET () API external request using jQuery

Question

GET () API external request using jQuery

I am using IMDb API v2.0 and I decided to check it out. I can not. I think this is the cue ball cross-browser AJAX request from external sites .. but I do not know another way. For example, here is the imdbapi avatar test

Cm? Here is my 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" 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>

I am using Google Chrome.

Here is what worked for me:

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

+5

javascript jquery

nn2 Apr 2 '12 at 22:24

source share

4 answers

This is an AJAX cross-domain call, so you need a callback. jQuery makes this very simple, just add ?callback=?to your url.

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

Skipping data = dataStringin this case is simplified (I find).

Try this and continue on:

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

This is the same as:

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

+3

Reene pot 02 . '12 22:28

- Ajax jQuery. crossDomain :

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

crossDomain ( 1.5) Boolean : false , true . crossDomain (, JSONP) , crossDomain to true

Edit -

, ? , Json.

http://jsfiddle.net/7VcUJ/

:

HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Type: /html; charset = utf-8 : -1 : Microsoft-IIS/7.0 X-AspNet-: 4.0.30319 X-Powered-By: ASP.NET : , 02 2012 22:28:14 GMT Content-Length: 618
{ "Title": "", "": "2009", "Rated": "PG-13", "Released": "18 Dec 2009", "": ", , , ", "": " ", "": " ", "": " , , , ", "": " , , " ".": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX320.jpg" "Runtime": "2 42 ", "": "8,1", "": "386930", "ID": "tt0499549", "": "True" }

0

asawyer Apr 2 '12 at 22:26

source share

Add a parameter callbackto the url to use JSONP:

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

Using $will cause jQuery to automatically generate a callback function for you and automatically process the response.

GET () API external request using jQuery

More articles: