【发布时间】：2021-03-20 16:04:52
【问题描述】：
我是 API 新手，第一次尝试使用 Flickr API 创建画廊，但我真的很难让它正常工作。
我已经正确创建了 url，如果我直接在 url 中插入搜索参数，当我控制台日志时，我可以看到正确的图像列表。当我尝试将参数从变量传递到 url 时，就会出现此问题。并且错误以两种不同的方式表现出来，具体取决于我是将 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`;
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", code: 3, message: "无参数搜索已被禁用。请改用 flickr.photos.getRecent。"} em>
我似乎没有正确地将参数传递给 url，因为我在尝试创建画廊本身时也遇到了问题，当我尝试从 API 数组中的图像传递必要的 id 到我正在创建的图像 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';
但两种方式给出的结果完全相同。
【问题讨论】：
标签： javascript api url parameter-passing flickr