API url出现问题:似乎无法正确传递参数

我是API新手，第一次尝试使用Flickr API创建一个库，但我真的很难让它正常工作。

我已经正确地创建了url，如果我直接在url中插入搜索参数，当我控制台日志时，我可以看到正确的图像列表。当我试图将参数从变量传递到url时，就会出现这个问题。错误表现为两种不同的方式，这取决于我是将url变量放在参数变量之前还是之后。

案例1:

var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;
var searchWord = document.getElementById('input').value;
var perPage = 50;
var page = 1;

在这种情况下，它将控制台日志数据，但使用自己选择的参数。

案例2:

var searchWord = document.getElementById('input').value;
var perPage = 50;
var page = 1;
var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;

在这种情况下，它将返回以下错误消息：{stat:"fail"，代码：3，消息："已禁用无参数搜索。请改用flickr.photos.getRecent。"}

我似乎没有正确地将参数传递到url，因为我在尝试创建库本身时也遇到了问题，当我试图将必要的id从API数组中的图像传递到我正在创建的图像url时，这些参数最终都是未定义的。

这是我写的代码：

function createGallery(photos) {
for (let photo of Object.keys(photos)) {
const imgElem = document.createElement('li');
imgElem.innerHTML = `<img src='https://farm{${photo.farm}}.staticflickr.com/{${photo.server}}/{${photo.id}}_{${photo.secret}}_[mstzb].jpg'></img>`;
imgElem.setAttribute('img-id', photo.id);
gallery.append(imgElem);
}
}

只是为了概述一下，这里是我的JS的最后一点：

//Fetch API
async function start() {
const response = await fetch (url)
const data = await response.json()
console.log(data)
createGallery(data)
}

//Call functions
search()

这是我的HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<main>
<input type="text" id="input">
<button id="search">Go</button>
<ul id="gallery"></ul>

</main>
<script src="script.js"></script>
</body>
</html>

谁能解释我做错了什么？？提前感谢：(

编辑：我试着用加号而不是模板文字来附加变量，比如：

var url = 'https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text='+searchWord+'&per_page='+perPage+'&page='+page+'&format=json&nojsoncallback=1';

但这两种方法给出的结果完全相同。

您基本上是错误地追加了参数。

您有以下内容：

var perPage = 50;
var page = 1;
var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;

当你定义这个url时，它应该类似于这个。。

var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=' + searchWord + '&per_page=' + perPage + '&page=' + page + '&format=json&nojsoncallback=1'

请注意这里的区别，我们实际上只是通过将JS变量附加到String来构建url-var。没有${}访问声明的页面和perPage JS变量。。。

相关内容

最新更新

热门标签：