[英]How to read json data on your own domain using jquery ajax and jsonp
[英]How to read data using JSONP, Ajax and jquery?
我正在尝试从此API读取数据,但无法正常工作,我有一个输入框,在其中输入isbn编号,然后使用jsonp获取数据。 您能否帮助我确定我的错误(“无法读取未定义的属性'title'的属性”)在哪里?
function add(){
var isbn = parseInt($("#isbn").val());
var list = $("#list");
console.log(parseInt(isbn));
$.ajax({
url: "https://openlibrary.org/api/books?bibkeys=" + isbn + "&jscmd=details&callback=mycallback",
dataType: "jsonp",
success: function(isbn){
var infoUrl = isbn.info_url;
var thumbnailUrl = isbn.thumbnail_url;
var title = isbn.details.title;
var publishers = isbn.details.publishers;
var isbn13 = isbn.details.isbn_13;
console.log(isbn.info_url);
}
});
}
Open Library的API希望使用bibkeys
作为类型和冒号的前缀,而不仅仅是数字:
function add(){
var isbn = 'ISBN:' + $("#isbn").val();
// ...
冒号还表示该值应该是URL编码的,jQuery可以为您做到这一点:
$.ajax({
url: "https://openlibrary.org/api/books?jscmd=details&callback=?",
data: { bidkeys: isbn },
dataType: "jsonp",
然后,它返回的数据将重复使用您作为属性提供的bibkeys
:
{ "ISBN:0123456789": { "info_url": ..., "details": { ... }, ... } }
要访问该书的信息,您必须首先访问以下属性:
success: function(data){
var bookInfo = data[isbn];
console.log(bookInfo.details.title);
// etc.
}
示例: https : //jsfiddle.net/3p6s7051/
您还可以使用Object.keys()
从对象本身检索bibkey
:
success: function (data) {
var bibkey = Object.keys(data)[0];
var bookInfo = data[bibkey];
console.log(bookInfo.details.title);
// ...
}
注意:您可以使用它进行验证,因为该请求在技术上可以成功完成,并且不包含任何图书信息(即未找到匹配项):
success: function (data) { var bibkeys = Object.keys(data); if (bibkeys.length === 0) return showError('No books were found with the ISBN provided.'); // ...
我问一位教授,这是她告诉我解决的方法:
function add(){
var isbn = parseInt($("#isbn").val());
var list = $("#list");
console.log(parseInt(isbn));
$.ajax({
url: "https://openlibrary.org/api/books?bibkeys=" + isbn + "&jscmd=details&callback=mycallback",
dataType: "jsonp",
success: function(data){
var thumb=data["ISBN:"+isbn+""].thumbnail_url;
....
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.