如何使用JSONP，Ajax和jquery讀取數據？

Question

我正在嘗試從此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);
                              }
        });
    }

Answer 1

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.'); // ... 

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

Answer 2

我問一位教授，這是她告訴我解決的方法：

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