Question

我正在尝试向外部 API 执行 Fetch 请求，它应该返回一些 JSON 数据。我已经在我的浏览器控制台中测试了该请求并且它工作正常，但是一旦我在提交表单时添加此代码运行，它似乎没有做任何事情。没有错误，它什么也不做。

这是我的功能：

async function getStats() {
    let username = document.forms["usernameSearch"]["username"].value.toLowerCase();
    let response = await fetch(`https://api.hypixel.net/player?key=${key}&name=${username}`);
    let data = await response.json();
    console.log(data);
}

这是表单的 HTML：

<form name="usernameSearch" onsubmit="getStats()">
    <input type="text" name="username" placeholder="Username..." />
    <input type="submit" value="Go!" />
</form>

无论我输入什么，当我点击表单上的提交时，页面都会刷新，控制台什么也不显示。

Answer 1

您需要阻止 onsubmit 的默认行为。您可以将属性值更改为

<form name="usernameSearch" onsubmit="onsubmit="event.preventDefault(); getStats()"">

获取请求不返回任何内容

1 个答案: