javascript - 如何使用JSONP、Ajax和jquery读取数据？

Question

我正在尝试从此 API 读取数据，但它不起作用，我有一个输入框，可以在其中输入 isbn 编号，然后使用 jsonp 获取数据。你能帮我确定我的错误(“无法读取未定义的属性'标题'”)在哪里吗？

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);
                              }
        });
    }

Answer 1

Open Library's 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);
    // ...
}

Note: You can use this to validate, since the request can be technically successful and not include any book information (i.e. no matches found):

success: function (data) {
    var bibkeys = Object.keys(data);

    if (bibkeys.length === 0)
        return showError('No books were found with the ISBN provided.');

    // ...

示例:https://jsfiddle.net/q0aqys87/