獲取請求不返回任何內容

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