在文本框中键入作者名称后，我正在尝试显示报价，但由于某种原因，它没有显示任何内容。我应该如何解决此问题？

发布于 2025-01-25 12:50:07 字数 1814 浏览 3 评论 0原文

当我在文本框中输入作者名称时，我会变得不确定，然后按按钮显示报价。似乎我的按钮和文本框没有链接在一起。我该如何解决？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Quotes</title>
</head>
<body>

<label for="getQuotes">Find Quotes (Type Author Name)</label><br>
<input type = "text" id="getQuotes" name="getQuotes" placeholder="Search" style="margin:10px" size="50"/><br />
<button id="FetchQuotes" onclick="getQuote()"  style="margin:10px">Fetch Quotes</button>

<p id="quotes"></p>

<p id="author"></p>

<script>
    async function getQuote() {
        //const author = Boolean(false);
        let url = 'https://jaw1042-motivate.azurewebsites.net/quote';
        let author = document.getElementById('getQuotes').value;
        if(author) {
            url = 'https://jaw1042-motivate.azurewebsites.net/quote?author= ';
            console.log(url + author);
        } else {
            console.log(url);
        }
        fetch(url)
            .then(async (response) => {
                if (response.ok) {
                    console.log("Response code: " + response.status);
                } else if (response.status === 400) {
                    console.log("Unable to find any quotes by specified author: " + response.status);
                } else {
                    console.log("No quotes have been loaded: " + response.status);
                }
                const val = await response.json();
                console.log(val);
            }).then(data => {
            document.getElementById('quotes').value = data;
            document.getElementById('author').value = data;
            console.log(data);
            alert(data);
        });
    }
</script>
</body>
</html>

原文

I am getting undefined when I type the author name in the text box and press the button to display the quote. It seems like my button and textbox are not linked together. How can I fix this?

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Quotes</title>
</head>
<body>

<label for="getQuotes">Find Quotes (Type Author Name)</label><br>
<input type = "text" id="getQuotes" name="getQuotes" placeholder="Search" style="margin:10px" size="50"/><br />
<button id="FetchQuotes" onclick="getQuote()"  style="margin:10px">Fetch Quotes</button>

<p id="quotes"></p>

<p id="author"></p>

<script>
    async function getQuote() {
        //const author = Boolean(false);
        let url = 'https://jaw1042-motivate.azurewebsites.net/quote';
        let author = document.getElementById('getQuotes').value;
        if(author) {
            url = 'https://jaw1042-motivate.azurewebsites.net/quote?author= ';
            console.log(url + author);
        } else {
            console.log(url);
        }
        fetch(url)
            .then(async (response) => {
                if (response.ok) {
                    console.log("Response code: " + response.status);
                } else if (response.status === 400) {
                    console.log("Unable to find any quotes by specified author: " + response.status);
                } else {
                    console.log("No quotes have been loaded: " + response.status);
                }
                const val = await response.json();
                console.log(val);
            }).then(data => {
            document.getElementById('quotes').value = data;
            document.getElementById('author').value = data;
            console.log(data);
            alert(data);
        });
    }
</script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒路情人 2025-02-01 12:50:08

您的然后功能不正确
在Fetchapi的直接结果中，您可以接收数据并使用它，您需要运行.json（）或.text（）使用该结果或返回其值（加上您使用返回语句时，所有下一个代码将无法实现）之后，您不应该将某些内容分配给Data变量，因为它只是从后端获取了新数据，通过将新值分配给您要破坏新数据的数据

是您的JS应该如何看待

     function getQuote() {
       fetch("https://krv1022-motivate.azurewebsites.net/quote")         
         .then( res => res.text() )
         .then( data => {
             document.querySelector(".quote").value = data;
         }
       );
    }

我还提供了一个小提琴，但由于您的URL不正确，或者有CORS问题

=========================================================================== ======================

我刚刚注意到的一件事，您是从最终用户那里收到作者的名字，但您不会将其发送给后端！

因此，也许此代码更完整，我认为您想使用Get Method发送数据，而后端则希望将作者的名字命名为getQuotes

your then functions are not correct
in the direct result of the fetchAPI you can receive data and to use it you need to run .json() or .text() on it, you can't simply use that result or return it's value ( plus when you use return statement all your next codes will be unreachable)
after that you should not assign something to your data variable because it just has new Data fetched from backend, by assigning new value to data you're about to ruin new data

here is how your js should look

     function getQuote() {
       fetch("https://krv1022-motivate.azurewebsites.net/quote")         
         .then( res => res.text() )
         .then( data => {
             document.querySelector(".quote").value = data;
         }
       );
    }

I also provided a fiddle for it but it can't receive data because either your URL is not correct or there is CORS issues

==============================================

one thing that I just noticed, you are receiving Author's name from end user but you are not about to send it to backend!

so perhaps this code is more complete, I assume that you want to send data using GET method and backend wants the name of author to be named getQuotes

回复收藏 0 原文

~没有更多了~