Javascript 获取附加数据到 HTML 并覆盖

Question

对 Javascript 来说还很陌生。我有一个 HTML 表单，其 onsubmit 属性等于我的 JavaScript 函数 getResponse()。在 getResponse() 函数中，我执行了 fetch (POST) 操作以从 API 检索数据。我想将数据附加到页面上供用户查看，但是，它似乎在出现在屏幕上的几毫秒内就从屏幕上删除了。

我的函数 getResponse():

fetch('/', {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
        },
})
        .then(json)
        .then(function (data) {
            $(".formResponse").append(`<p>Response: ${data.user}`)
        })
        .then(function (error) {
            console.error(error);
        });

这与我控制台记录数据的情况类似，除非我在开​​发工具中“保留”日志，否则数据将会消失。有什么建议吗，我在这里做错了什么？

Answer 1

您需要防止表单提交的默认行为。您可以通过调用preventDefault()来做到这一点关于从onsubmit传递的事件:

 function getResponse(event) {
     // Prevent the default behavior of the form submitting.
     event.preventDefault()

     fetch('/', {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
            'Content-Type': 'application/json',
        },
})
        .then(json)
        .then(function (data) {
            $(".formResponse").append(`<p>Response: ${data.user}`)
        })
        .then(function (error) {
            console.error(error);
        });
 }

<form> onsubmit通过 event参数，因此您可以在表单上执行以下操作:

<form onsubmit="getResponse(event);"></form>