为什么提交评论时fetch请求重复发送，同一条评论多次展示如何解决

问题根因 #

你每次点击提交按钮时，都会调用sendComment()方法，而这个方法内部每次都会给评论表单新增一个submit事件监听器。累计点击N次提交按钮后，表单上就绑定了N个相同的提交事件回调，触发提交时就会同时执行N次fetch请求、N次插入评论操作，所以出现重复提交和重复展示的问题。

修复方案 #

方案一（推荐）：页面加载时一次性绑定提交事件，移除按钮的onclick属性 #

调整JS代码：

function insertNewComment(data) {
    var ul = document.getElementById("new-comment");
    ul.insertAdjacentHTML('afterBegin', '<li class="list-group-item">' + data.text + '</li>');
}

// 页面加载完成后一次性绑定表单提交事件
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('comment').addEventListener('submit', (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);
        fetch(e.target.getAttribute('action'), {
            method: e.target.getAttribute('method'),
            body: formData
        })
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            insertNewComment(data);
            document.getElementById('comment').reset();
        });
    });
})

调整HTML代码：

移除提交按钮上的onclick='sendComment()'属性即可，修改后按钮代码如下：

{{form.submit(class="btn btn-dark send-comment")}}

方案二：保留onclick调用，去掉sendComment内部的事件绑定逻辑 #

调整JS代码：

function insertNewComment(data) {
    var ul = document.getElementById("new-comment");
    ul.insertAdjacentHTML('afterBegin', '<li class="list-group-item">' + data.text + '</li>');
}

// 直接处理提交逻辑，不再新增事件监听
function sendComment() {
    const form = document.getElementById('comment');
    const formData = new FormData(form);
    fetch(form.getAttribute('action'), {
        method: form.getAttribute('method'),
        body: formData
    })
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        insertNewComment(data);
        form.reset();
    });
}

调整HTML代码：

需要给提交按钮新增type="button"属性，避免按钮默认触发表单提交事件，修改后按钮代码如下：

{{form.submit(class="btn btn-dark send-comment", type="button", onclick='sendComment()')}}

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