Ajax 查询以获取 json 数据
Ajax query to fetch json data
我正在尝试从一个 api 中获取标题,但遇到了一些错误。这是我第 3 次使用 ajax。
请告诉我哪里做错了。
这是我的代码。
<!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
请告诉我如何修复错误。
删除数据类型中的 p。 [=13P 是指 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);
}
我正在尝试从一个 api 中获取标题,但遇到了一些错误。这是我第 3 次使用 ajax。 请告诉我哪里做错了。
这是我的代码。
<!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
请告诉我如何修复错误。
删除数据类型中的 p。 [=13P 是指 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);
}