有没有办法使用用户输入来搜索 api答案

【问题标题】：Is there a way to use user input to search the api有没有办法使用用户输入来搜索 api
【发布时间】：2021-05-06 11:45:07
【问题描述】：

好的，我正在使用https://nyaaapi.herokuapp.com/ 来获取信息

获取您使用的动画https://nyaaapi.herokuapp.com/nyaa/anime?query={nameofanime}

我想将动漫名称作为用户输入

我对 apis 和 json 比较陌生，我总是使用随机端点。我写了一些js，但它并不正确

const userInput = document.querySelector("#userInput").value;

fetch("https://nyaaapi.herokuapp.com/nyaa/anime?query=${userInput}")
  .then((response) => response.json())
  .then((quote) => console.log(quote));

<html>
<head>
<title>
anime
</title>
</head>
<body>

  <p>
    Anime: <input id="userInput" value="{naruto}" />
    <br />
    <button id="submit">submit</button>
  </p>
  <script src="index.js"></script>
</body>
</html>

目前的工作方式：它正在向 api 发送请求并记录它！

目前无法正常工作的内容：当它发送请求并记录它时。看不到相关信息（下图）

编辑：第三个答案对我的需要最有用。我现在会尝试弄清楚如何向用户显示记录的信息

【问题讨论】：

是的，当然有。请分享您的尝试，以便其他人可以看到您的问题
我已经添加了我的代码！
请分享更多细节。究竟是什么不使用给定的代码？你有什么努力让它发挥作用？
您不调用设置。而且weatherAsk和AnimeAsk不一样
好吧，目前我希望搜索输入，并将 api 的响应作为搜索网站时的结果。谢谢你的帮助！

标签： javascript json string api

【解决方案1】：

你可以做这样的事情，当输入被提交时，它会将 api 调用的结果记录到控制台：

您需要在 html 中输入：

<input id="input" type="text" />

在你的 js 中：

function refreshData(e) {
  const nameOfAnime = e.target.value;
  const url = `https://nyaaapi.herokuapp.com/nyaa/anime?query=${nameOfAnime}`;
  fetch(url)
    .then((res) => res.json())
    .then(console.log);
}

const input = document.getElementById("input");

input.addEventListener("change", refreshData);

【讨论】：

【解决方案2】：

你可以试试这个使用document.querySelector();访问DOM元素值

const userInput = document.querySelector("#userInput").value;

现在使用fetch()函数发出api请求。

fetch((`https://nyaaapi.herokuapp.com/nyaa/anime?query=${userInput}`).then((data)=>{
       console.log(data);
})

【讨论】：

【解决方案3】：

我以前做过类似的事情。这可以给你一个开始。

window.onload=function(){

        const input = document.getElementById("input");
        const getName = document.getElementById("getName");
        
        
        getName.addEventListener("submit", e =>{
            // Prevent the form from submission
            e.preventDefault();
            // Get city name and store it in local storage
            var inputVal = getName.value;
            var api_url = "{apiurl}" + inputVal;
            // Get the dataset
            function refreshData() {
                fetch(api_url).then(response =>{
                    response.json().then(json => {
                        let dataset = json;
                        let output = formatResponse(dataset);

                    })
                    // Catch error - for example, the user doesn't input a valid name
                    .catch(error => console.log("not ok")); // TO BE IMPROVED
                })

            
        };
});
};

<form id="getName" class="search">
            <input type="text" id="input">
            <button id="submit" type="submit">Search</button>
</form>

【讨论】：