使用jQuery .ajax和jQueryMobile示例从Google Books API获取JSONP

时间:2013-05-31 12:36:30

标签: web-services jquery jquery-mobile google-api

阅读Google Books API,他们拥有关于如何使用REST API的documentation,并且还提到了如何将API与客户javascript一起使用。

我正在制作一个phonegap / JQueryMobile应用程序,我想使用ajax和Google Books API获取数据,但我们很难理解他们的API。

我想要获取的是使用$ .ajax方法的JSONP对象。

您是否有任何示例代码,使用Google Books API获取数据并使用可在phonegap应用程序中使用的jQuery $ .ajax。

我是否有提供回调方法的兴奋,或者我是为了这个,只是为了让人感到困惑......

在此代码中:

<body>
    <div id="content"></div>
    <script>
      function handleResponse(response) {
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        // in production code, item.text should have the HTML entities escaped.
        document.getElementById("content").innerHTML += "<br>" + item.volumeInfo.title;
      }
    }
    </script>
    <script src="https://www.googleapis.com/books/v1/volumes?q=harry+potter&callback=handleResponse"></script>
  </body>
来自Google Books API的他们说你可以获得JSONP数据,但我似乎无法掌握如何使用jquery $ .ajax并使用jsonp作为类型。

1 个答案:

答案 0 :(得分:3)

为了让你开始,你可以这样做:

// Set the api variable
var googleAPI = "https://www.googleapis.com/books/v1/volumes?q=harry+potter";

// Make a ajax call to get the json data as response.
$.getJSON(googleAPI, function (response) {

    // In console, you can see the response objects
    console.log("JSON Data: " + response.items);

    // Loop through all the items one-by-one
    for (var i = 0; i < response.items.length; i++) {

        // set the item from the response object
        var item = response.items[i];

        // Set the book title in the div
        document.getElementById("content").innerHTML += "<br>" + item.volumeInfo.title;
      }
});

FIDDLE DEMO