JSONP 与 ISBNdb答案

【问题标题】：JSONP with ISBNdbJSONP 与 ISBNdb
【发布时间】：2014-08-27 10:45:47
【问题描述】：

我正在尝试从ISBNdb API 提交用户表单时提取图书数据。我根据需要在 url 中使用 JSON。截至目前，我正在使用该表格通过books category 进行搜索（请参阅页面的一半左右）。当我输入搜索词时，控制台中出现 2 个错误：

资源解释为脚本但以 MIME 类型传输文本/纯文本： “http://isbndb.com/api/v2/json/J6FR9HT6/books?jsoncallback=jQuery1111037271023145876825_1404698815454&q=science&_=1404698815455”。

jquery.min.js:4 Uncaught SyntaxError: Unexpected token :

我看到了我期待的q=science，但是 jQuery 似乎要添加的所有其他内容是什么？非常感谢任何帮助！

<!DOCTYPE html>
<html lang="">
<head>

<meta charset="utf-8">
<title></title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

 $('form').submit(function (event) {
    event.preventDefault();
    var searchTerm = $('#search').val();
    // the AJAX part
    var isbndbAPI = 'http://isbndb.com/api/v2/json/J6FR9HT6/books?jsoncallback=?';

    var bookOptions = {
      q: searchTerm
    };
    function displayBookData(data) {
      var bookHTML = '<ul>';
      $.each(data.data,function(i,book) {           
        bookHTML += '<li>';
        bookHTML += book.title;
        bookHTML += '</li>';
      }); // end each
      bookHTML += '</ul>';
      $('#book-results').html(bookHTML);
    }
    $.getJSON(isbndbAPI, bookOptions, displayBookData);

  }); // end submit

}); // end ready

</script>

</head>
<body>


<form>
  <label for="search">Type a search term</label>
  <input type="search" name="search" id="search">
  <input type="submit" value="Search" id="submit">
</form>

<div id="book-results"></div>

</body>
</html>

更新

似乎接收到 JSON 回来了，我可以在控制台中看到结果。仍然感到困惑，因为这对我来说是全新的。另外，我也可能无法正确地将其显示为 HTML。

【问题讨论】：

query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Fisbndb.com%2Fapi%2Fv2%2Fjson%2FJ6FR9HT6%2Fbooks%3Fq%3Dscience%22&format=json&callback =我的回调
@ansarob 见帖子，developer.yahoo.com/yql。谢谢

标签： javascript jquery json api jsonp

【解决方案1】：

原帖中的url没有包含api所需的参数：

error: "'query' or 'q' is a required parameter"

见ISBNdb API -- Version 2

请求网址：http://isbndb.com/api/v2/xml/mykey/books?q=science

试试

$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"
          +"* from json where url='http://isbndb.com/api/v2/json/J6FR9HT6/books?q=science'"        
          +"&format=json&diagnostics=true&callback=?"
          , function(data, textStatus, jqxhr) {
              console.log(data.query.results.json.data);
              $.each(data.query.results.json.data, function(index, value) {
                  $("<li>", {"text" : value.title +", " 
                            + (value.author_data 
                              ? (value.author_data.name 
                                ? value.author_data.name 
                                : value.author_data.id) 
                              : void(0)) }).appendTo("ul");                  
              });              
})
.fail(function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown);
});

jsfiddle http://jsfiddle.net/guest271314/bZBLf/

【讨论】：

你能解释一下https://query.yahooapis.com/v1/public/yql?q=select这部分吗？为什么要通过yahooapis.com查询呢？
@Shri $.get("http://isbndb.com/api/v2/xml/mykey/books?q=science") // XMLHttpRequest cannot load http://isbndb.com/api/v2/xml/mykey/books?q=science&_=1452400793835. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://stackoverflow.com' is therefore not allowed access.

【解决方案2】：

您提到的 API 不支持 JSONP。正如其 documentation 所述，它仅支持 JSON、YAML 和 XML。

响应格式

API 将以 3 种不同格式之一对其返回数据进行序列化：

Json - /api/v2/json/my-api-key
Yaml - /api/v2/yaml/my-api-key
XML - /api/v2/xml/my-api-key

jQuery 尝试将返回的 JSON 文件视为 JS 文件，但它不会因此导致错误。

【讨论】：

如果我不能使用 JSONP，我应该如何提取数据？
@ansarob - 您可以使用jQuery cross-domain plugin 来解决同源策略。

【解决方案3】：

您的服务器端要么需要更改其内容类型以提供 JSON，要么需要取回数据并将其视为文本，然后转换为 JSON。

看起来您正在尝试请求 JSONP...不确定您是否可以/将其作为文本拉下然后转换它并仍然让回调运行。

【讨论】：