获取请求不返回任何内容

Question

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

这是我的 function：

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()"">