我正在尝试使用AngularJS的$ http从openlibrary中提取JSON数据。我正在使用ISBN 1560761164
这是代码。
$scope.fetch = function(isbn) {
$scope.method = 'JSONP';
$scope.url = "http://openlibrary.org/search.json?isbn=";
$http({method: $scope.method, url: $scope.url + isbn + "&callback=JSON_CALLBACK"}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data;
$scope.status = status;
});
};
我最终在search.json
中收到以下错误Uncaught SyntaxError: Unexpected token :
我真的不确定为什么它会在这种情况下死亡,我尝试从JSONP中删除P(希望它能正确回复)但是我得到了404响应,它似乎没有用(很高兴成为纠正了那个)。
这是search.json的内容(在开发者控制台中):
{
"start": 0,
"num_found": 2,
"numFound": 2,
"docs": [
{
"title_suggest": "Dark heart",
"edition_key": [
"OL24911358M"
],
"isbn": [
"1560761164",
"9781560761167"
],
"has_fulltext": false,
"text": [
"OL24911358M",
"1560761164",
"9781560761167",
"Tina Daniell",
"Copyright Paperback Collection (Library of Congress)",
"25151948",
"OL776411A",
"American Fantasy fiction",
"Dark heart",
"OL16007376W",
"Tina Daniell",
"TSR Inc.",
"90071496"
],
"author_name": [
"Tina Daniell"
],
"oclc": [
"25151948"
],
"contributor": [
"Copyright Paperback Collection (Library of Congress)"
],
"author_key": [
"OL776411A"
],
"subject": [
"American Fantasy fiction"
],
"title": "Dark heart",
"publish_date": [
"1992"
],
"ebook_count_i": 0,
"publish_place": [
"Lake Geneva, WI"
],
"edition_count": 1,
"key": "OL16007376W",
"publisher": [
"TSR Inc."
],
"language": [
"eng"
],
"lccn": [
"90071496"
],
"last_modified_i": 1312010687,
"publish_year": [
1992
],
"first_publish_year": 1992
},
{
"title_suggest": "Dark Heart (Dragonlance: The Meetings Sextet, Vol. 3)",
"edition_key": [
"OL8617758M"
],
"cover_i": 790919,
"isbn": [
"1560761164",
"9781560761167"
],
"has_fulltext": true,
"text": [
"OL8617758M",
"1560761164",
"9781560761167",
"Tina Daniell",
"darkheart00dani",
"OL776411A",
"Accessible book",
"American Fantasy fiction",
"In library",
"Protected DAISY",
"Dark Heart (Dragonlance: The Meetings Sextet, Vol. 3)",
"OL4132436W",
"Wizards of the Coast",
"KitiaRa Uth MataR stood iN thE shadE of a loNE oak on a small rise that overlooked a shallow valley."
],
"author_name": [
"Tina Daniell"
],
"ia": [
"darkheart00dani"
],
"author_key": [
"OL776411A"
],
"subject": [
"Accessible book",
"American Fantasy fiction",
"In library",
"Protected DAISY"
],
"title": "Dark Heart (Dragonlance: The Meetings Sextet, Vol. 3)",
"ia_collection_s": "printdisabled;inlibrary;browserlending;americana;internetarchivebooks",
"printdisabled_s": "OL8617758M",
"ebook_count_i": 1,
"ia_box_id": [
"IA127609"
],
"edition_count": 1,
"first_publish_year": 1992,
"key": "OL4132436W",
"id_goodreads": [
"92908"
],
"public_scan_b": false,
"publisher": [
"Wizards of the Coast"
],
"language": [
"eng"
],
"last_modified_i": 1340764985,
"lending_edition_s": "OL8617758M",
"id_librarything": [
"193011"
],
"cover_edition_key": "OL8617758M",
"first_sentence": [
"KitiaRa Uth MataR stood iN thE shadE of a loNE oak on a small rise that overlooked a shallow valley."
],
"publish_year": [
1992
],
"publish_date": [
"January 1, 1992"
]
}
]
}
是否有人建议从客户端应用程序中提取此数据而不必处理后端?
编辑:这是电话api的链接。 https://openlibrary.org/dev/docs/api/search
API的URL格式很简单。获取搜索URL并替换 /用/search.json搜索。
http://openlibrary.org/search?q=the+lord+of+the+rings
http://openlibrary.org/search?title=the+lord+of+the+rings
http://openlibrary.org/search.json?author=tolkien
http://openlibrary.org/search?q=the+lord+of+the+rings&page=2
我猜它没有显式地声明isbn,但是如果你访问了URL它会实际显示一个有效的JSON对象,我会因为某种原因无法“检索”它,所以数据会正确返回。
失败的示例工作URL:
http://openlibrary.org/search.json?isbn=1560761164&callback=angular.callbacks._0
其他信息:
在没有JSONP的情况下调用它并仅使用JSON作为方法我得到以下控制台错误:
OPTIONS http://openlibrary.org/search.json?isbn=1560761164 405(Method Not Allowed)angular.js:7962
XMLHttpRequest无法加载http://openlibrary.org/search.json?isbn=1560761164。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点'null'访问。
这是JSON请求标头:
OPTIONS /search.json?isbn=1560761164 HTTP/1.1
Host: openlibrary.org
Connection: keep-alive
Cache-Control: no-cache
Access-Control-Request-Method: JSON
Pragma: no-cache
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Access-Control-Request-Headers: accept
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
并回复:
HTTP/1.1 405 Method Not Allowed
Server: nginx/0.8.54
Date: Wed, 11 Jun 2014 23:31:10 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Allow: GET, HEAD, POST, PUT, DELETE
X-OL-Stats: ""
Connection: Keep-Alive
以下是JSONP请求标头:
GET /search.json?isbn=1560761164&callback=angular.callbacks._0 HTTP/1.1
Host: openlibrary.org
Connection: keep-alive
Cache-Control: no-cache
Accept: */*
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: session="/people/onaclov2000%2C2014-06-02T20%3A09%3A47%2C350bc%2428943338f8cbec882f19b2851f81ae1e"
并回复:
HT
TP/1.1 200 OK
Server: nginx/0.8.54
Date: Wed, 11 Jun 2014 23:32:27 GMT
Transfer-Encoding: chunked
X-OL-Stats: "IB 1 0.008 MC 1 0.001 SR 1 0.075 TT 0 0.091"
Connection: Keep-Alive
答案 0 :(得分:0)
解决方案: 获取该网站的开发人员并请求CORS可用(或JSONP)。
听了我一点,但我确实发现我无法调用JSON,我不得不使用GET
我查看了响应标题并看到了这导致我进入GET方面而不是JSON:注意它说Allow方法获取,选项< - 这表示允许GET不是JSON。
HTTP/1.1 200 OK
Server: nginx/0.8.54
Date: Fri, 13 Jun 2014 13:08:19 GMT
Transfer-Encoding: chunked
Access-Control-Allow-Origin: *
Access-Control-Allow-Method: GET, OPTIONS
Access-Control-Max-Age: 86400
Connection: Keep-Alive
一旦我这样做,这就是我所使用的(我真的看了一遍,只是把东西拉到一起,直到我弄明白了。)
<script>
var app = angular.module("myapp", []);
app.config(function($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
});
function MyController($scope, $http) {
$scope.fetch = function(isbn) {
$scope.method = 'GET';
$scope.url = "http://openlibrary.org/search.json?isbn=";
$http({method: $scope.method, url: $scope.url + isbn
}).
success(function(data, status) {
$scope.status = status;
$scope.data = data;
}).
error(function(data, status) {
$scope.data = data;
$scope.status = status;
});
};
}
</script>