javascript - Javascript 无法提取 JSON 响应
问题描述
我相信代码很好(否则请告诉我)。我的问题是围绕 API URL 和可能的标题。在我下面的代码中,该isError
函数一直被触发,让我相信我根本没有得到响应。我在邮递员中检查了这个 API URL,我得到了成功的响应。
代码:
//load Flickr Photos through their API
$(document).ready(function() {
getFlickrJSON();
});
function getFlickrJSON () {
$.ajax({
method: 'GET',
url: 'https://api.flickr.com/services/feeds/photos_public.gne',
data: {
format: "json"
},
dataType: 'json',
success: onSuccess,
error: onError
})
}
function onSuccess(jsonReturn) {
var fadeInT = 1000;
for(var i = 0; i<jsonReturn.data.children.length; i++) {
var items = jsonReturn.data.items[i].data;
var photo = [];
var photoTitle = items.title;
var author = [];
var description = [];
var tags = [];
var loadthis =
"<p class='photoTitle'>" + photoTitle + "</p>";
$(loadthis).hide().appendTo($('.photo_tile')).fadeIn(fadeInT);
}
console.log('success');
}
//if JSON fails
function onError(){
$('.photo_tile').html('No data found');
console.log('error');
}
//Response
jsonFlickrFeed({
"title": "Uploads from everyone",
"link": "https:\/\/www.flickr.com\/photos\/",
"description": "",
"modified": "2018-11-15T09:38:29Z",
"generator": "https:\/\/www.flickr.com",
"items": [{
"title": "Port sainte-rose , \u00eele de la R\u00e9union",
"link": "https:\/\/www.flickr.com\/photos\/156645216@N05\/30950648007\/",
"media": {"m":"https:\/\/farm5.staticflickr.com\/4857\/30950648007_eec58dca53_m.jpg"},
"date_taken": "2018-10-25T14:54:36-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/156645216@N05\/\">Nellouille974<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/156645216@N05\/30950648007\/\" title=\"Port sainte-rose , \u00eele de la R\u00e9union\"><img src=\"https:\/\/farm5.staticflickr.com\/4857\/30950648007_eec58dca53_m.jpg\" width=\"240\" height=\"240\" alt=\"Port sainte-rose , \u00eele de la R\u00e9union\" \/><\/a><\/p> ",
"published": "2018-11-15T09:38:29Z",
"author": "nobody@flickr.com (\"Nellouille974\")",
"author_id": "156645216@N05",
"tags": ""
},
{
"title": "[New post] Design Baju Korporat Vector",
"link": "https:\/\/www.flickr.com\/photos\/48423781@N04\/30950648667\/",
"media": {"m":"https:\/\/farm5.staticflickr.com\/4871\/30950648667_5f5837059f_m.jpg"},
"date_taken": "2018-11-15T01:38:32-08:00",
"description": " <p><a href=\"https:\/\/www.flickr.com\/people\/48423781@N04\/\">Fadzil Aripin<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/48423781@N04\/30950648667\/\" title=\"[New post] Design Baju Korporat Vector\"><img src=\"https:\/\/farm5.staticflickr.com\/4871\/30950648667_5f5837059f_m.jpg\" width=\"32\" height=\"32\" alt=\"[New post] Design Baju Korporat Vector\" \/><\/a><\/p> <p>via Creeper Design 03 6143 5225 <a href=\"https:\/\/ift.tt\/2Puetac\" rel=\"nofollow\">ift.tt\/2Puetac<\/a><\/p>",
"published": "2018-11-15T09:38:32Z",
"author": "nobody@flickr.com (\"Fadzil Aripin\")",
"author_id": "48423781@N04",
"tags": "new post design baju korporat vector"
}]
})
解决方案
您面临的问题是 CORS ,您可以使用 chrome 扩展或在 ajax 请求中欺骗它
$.ajax({
method: 'GET',
url: 'https://cors-anywhere.herokuapp.com/https://api.flickr.com/services/feeds/photos_public.gne?format=json',
"headers": {
"origin": "https://flickr.com",
},
success : function(res){
console.log(res)
}
})
这将为您欺骗请求,但请注意,因为设置标头“来源”是不安全的
希望这会帮助你。
推荐阅读
- swift - Swift:测试使用委托调用的 URLSession
- json - 递归结构的 Json 模式不起作用
- python - 使用 flow_from_directory 时出现荒谬的损失和度量值
- javascript - 如何在 Vue.js 中 v-for 循环嵌套导航?
- c# - MD5 中的数据类型转换,无论是 SSIS 还是 C#
- selenium - 在使用 selenium(geckodriver)打开的浏览器上运行美丽的汤
- python-3.x - 如何在 python 中合并多个 xls 工作表?
- java - 防止 JavaMail 解码作为 java.lang.String 对象传递的 base-64 内容
- php - 在哪里托管 Braintree 进行生产?
- php - Laravel 中的正则表达式