Question

我尝试使用提取方法简化列表；如果我尝试在add或deleteTask中添加功能updateData以保证，所有请求都可以正常工作以查看结果，我必须刷新网站，整个列表会翻倍。我可以问一下如何使其与自动刷新一起工作的提示吗？我正在使用JSON服务器存储数据。

   function updateData() {
            var ul = document.querySelector('.listOfTasks');

            fetch('http://localhost:3000/tasks')
                .then((res) => res.json())
                .then((data) => {
                    let tasks = '';
                    data.forEach(function (task) {
                        tasks +=
                            `<li class="taskElement" id=${task.id}><input type="checkbox" class="checkbox">
                                <span class="task"> ${task.name}</span>
                                <img class="deleteBtn" id=${task.id} src="../assets/trash.png"> </img>
                             </li>`

                    })
                    ul.insertAdjacentHTML('afterBegin', tasks)
                })
        }



function addTask(e) {
        e.preventDefault();
        var taskName = document.querySelector('.taskName').value;
        var ul = document.querySelector('.listOfTasks');
        if (taskName === "") {
            alert("Please write something")
        } else {
            fetch('http://localhost:3000/tasks', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({name: taskName})
            })
                .then((res) => res.json())
        }
    }

function deleteTask(e) {
        e.preventDefault();

        if (e.target.className === 'deleteBtn') {

            fetch('http://localhost:3000/tasks/' + e.target.id, {
                method: 'DELETE',
            })
                .then((res) => res.json())
                .then((data) => console.log(data))

        }
    }

Answer 1

如果您想运行updateData()刷新列表，则需要替换 <ul>的内容，而不是添加到其中。

因此只需更改

ul.insertAdjacentHTML('afterBegin', tasks);

到

ul.innerHTML = tasks;

有关文档，请参见https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML。

POST数据提取后自动刷新

1 个答案: