如何使用 JS 将用户输入发送到 API答案

【问题标题】：How can I send user input to an API using JS如何使用 JS 将用户输入发送到 API
【发布时间】：2020-10-17 22:06:59
【问题描述】：

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

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

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

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

链接到我的代码文件：Github project

【问题讨论】：

您可以结合使用表单元素进行用户输入和 JS 函数将请求处理给 API。在 JS 函数中，您可以使用 fetch 向 API 发出请求。

标签： javascript html api input giphy-api

【解决方案1】：

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 获取的用户输入。

【讨论】：

【解决方案2】：

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}.

【讨论】：

你能检查一下我的Js文件吗。

【解决方案3】：

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

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

    return data;
}

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

【讨论】：