POST请求后前端HTML自动刷新，更新内容被重置的问题求助

问题核心：尽管调用了event.preventDefault()，但请求成功后页面仍会刷新，仅在请求失败（输入错误URL）时不刷新。这大概率是未处理的Promise异常或async事件处理函数的隐性行为导致的，结合你的代码，给出以下具体解决步骤：

方案1：移除async关键字并添加错误捕获 #

你的事件处理函数标记为async，但使用了.then()链式调用而非await，这可能导致浏览器对事件处理的Promise状态判断偏差。同时未捕获请求失败的Promise异常，成功时因无异常阻止，默认提交行为未被彻底阻断。

修改后的前端代码：

<form id="myForm">
    <label for="inputField">Enter your URL:</label>
    <input type="text" id="inputField" name="url" required>
    <button type="submit">Submit</button>
</form>
<h1 id="short_url"></h1>

<script>
    const form = document.getElementById("myForm");
    form.addEventListener("submit", (event) => {
        event.preventDefault();
        const formData = new FormData(form);
        const longURL = formData.get("url");
        axios
            .post(
                "http://127.0.0.1:8000/url",
                { target_url: longURL },
                {
                    headers: {
                        "Content-Type": "application/json",
                    },
                }
            )
            .then(function (response) {
                console.log(response.data.admin_url);
                // 赋值具体字段而非整个对象，避免显示[object Object]
                document.getElementById("short_url").textContent = response.data.admin_url;
            })
            // 捕获错误，避免未处理的Promise异常
            .catch(function (error) {
                console.error("请求失败:", error);
                // 可添加用户提示，比如alert(error.response.data.message)
            });
        // 兼容旧浏览器，额外阻止默认行为
        return false;
    });
</script>

方案2：改用await语法（保留async） #

若想保留async关键字，建议用await替代.then()，逻辑更清晰，避免链式调用的潜在问题：

<form id="myForm">
    <label for="inputField">Enter your URL:</label>
    <input type="text" id="inputField" name="url" required>
    <button type="submit">Submit</button>
</form>
<h1 id="short_url"></h1>

<script>
    const form = document.getElementById("myForm");
    form.addEventListener("submit", async (event) => {
        event.preventDefault();
        const formData = new FormData(form);
        const longURL = formData.get("url");
        try {
            const response = await axios.post(
                "http://127.0.0.1:8000/url",
                { target_url: longURL },
                {
                    headers: {
                        "Content-Type": "application/json",
                    },
                }
            );
            console.log(response.data.admin_url);
            document.getElementById("short_url").textContent = response.data.admin_url;
        } catch (error) {
            console.error("请求失败:", error);
        }
        return false;
    });
</script>

额外检查点 #

1. 确认后端返回200状态码的JSON数据，避免返回3xx重定向状态码（会触发浏览器自动刷新）。
2. 排查页面中是否存在其他监听submit事件的代码，可能覆盖你的preventDefault逻辑。
3. 确保前端页面通过本地服务器（如http://localhost:xxx）打开，而非直接打开本地文件（file://协议），后者可能引发浏览器异常行为。

内容的提问来源于stack exchange，提问作者user17714652