Fatal编程技术网

Javascript JSONP与ISBNdb

javascript jquery json api

Javascript JSONP与ISBNdb,javascript,jquery,json,api,jsonp,Javascript,Jquery,Json,Api,Jsonp,我试图在用户提交表单时从中提取图书数据。我根据需要在url中使用JSON。到目前为止，我正在使用该表单通过查看页面的一半进行搜索。输入搜索词时，控制台中出现2个错误： 解释为脚本但使用MIME类型传输的资源 文本/纯文本： jquery.min.js:4未捕获的语法错误：意外标记： 我看到了我期望的q=科学，但是jQuery似乎要添加的其他东西是什么？非常感谢任何帮助 <!DOCTYPE html> <html lang=""> <head> <me

我试图在用户提交表单时从中提取图书数据。我根据需要在url中使用JSON。到目前为止，我正在使用该表单通过查看页面的一半进行搜索。输入搜索词时，控制台中出现2个错误：

解释为脚本但使用MIME类型传输的资源 文本/纯文本：

jquery.min.js:4未捕获的语法错误：意外标记：

我看到了我期望的q=科学，但是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

您提到的API不支持JSONP。它只支持JSON、YAML和XML

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

Json-/api/v2/Json/my api密钥 Yaml-/api/v2/Yaml/my api密钥 XML-/api/v2/XML/my api密钥

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

服务器端需要更改其内容类型以提供JSON，或者需要将数据取回并将其作为文本处理，然后转换为JSON

看起来您正在尝试请求JSONP，但是。。。不确定是否可以/将其作为文本下拉，然后进行转换并仍然运行回调有多容易。

原始帖子中的url未包含api所需的参数：

错误：“查询”或“q”是必需的参数

看

请求URL:？q=科学

试一试

jsfiddle

那么，如果我不能使用JSONP，我该如何提取数据呢？@ansarob-您可以使用来处理相同的源策略。*%20来自%20json%20其中%20url%3D%22http%3A%2F%2Fisbndb.com%2Fapi%2Fv2%2Fjson%2FJ6FR9HT6%2Fbooks%3Fq%3Dscience%22&format=json&callback=mycallback@ansarob见帖子。谢谢你的解释https://query.yahooapis.com/v1/public/yql?q=select 这部分？为什么我们需要通过yahooapi.com查询它？@Shri$。gethttp://isbndb.com/api/v2/xml/mykey/books?q=science //无法加载XMLHttpRequesthttp://isbndb.com/api/v2/xml/mykey/books?q=science&_=1452400793835. 请求的资源上不存在“Access Control Allow Origin”标头。起源'http://stackoverflow.com因此，不允许访问。 
$.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);
});