javascript - 如何使用 JS 将用户输入发送到 API

Question

我想从用户那里获取输入值并将其发送到 API。基本上，API 链接接受其中的输入。

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

这里q，'funny cat'，实际上是用户输入。我想让它动态化。

当用户在搜索栏中输入名称时，我希望将此值发送到 API 并将结果提取到我的页面。

链接到我的代码文件：Github 项目

Answer 1

let searchText = document.getElementByID('searchText').value;
let searchBtn = document.getElementByID('searchBtn').addEventListener('click',search());

async function search(){
  let results = await axios.get(`http://api.giphy.com/v1/gifs/search?q=${searchText}/&api_key=dc6zaTOxFJmzC`)
  console.log(results);
}

为您的输入字段提供一个 searchText ID 并获取值并将其存储在变量中。将点击事件侦听器添加到您的搜索按钮并调用搜索函数并使用模板文字将值传递到您的 URL 字符串中的 searchText 变量中。${your_variable}.

Answer 2

有几种方法可以从 API 中获取数据。其中之一是使用 fetch 方法。

async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();

    return data;
}

要将用户输入传递给请求，您所要做的就是使用字符串连接动态构建 url 字符串。

Answer 3

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

我已经将 API 连接到我的网络应用程序。只需对 URL 稍作更改，我就能解决我的问题，这就是我的做法。

 http://api.giphy.com/v1/gifs/search?q=**"+ input +"**&api_key=dc6zaTOxFJmzC

这里的“输入”是使用 DOM 获取的用户输入。