Javascript 更新网页以反映CRUD应用程序中已删除的数据,而无需硬刷新

Javascript 更新网页以反映CRUD应用程序中已删除的数据,而无需硬刷新,javascript,python,html,ajax,Javascript,Python,Html,Ajax,我有一个可以运行的待办应用程序——我可以创建一个项目,检查它是否已完成,并使用旁边的X按钮删除该项目。当我创建一个项目时,它会立即在列表上弹出。但是,当我删除一个项目时,我必须手动刷新页面才能更新它。我遗漏了什么可以让它实时更新 index.html: const deletebtns = document.getElementsByClassName('deletebutton'); for (let i = 0; i < deletebtns.

我有一个可以运行的待办应用程序——我可以创建一个项目,检查它是否已完成,并使用旁边的X按钮删除该项目。当我创建一个项目时,它会立即在列表上弹出。但是,当我删除一个项目时,我必须手动刷新页面才能更新它。我遗漏了什么可以让它实时更新

index.html:

        const deletebtns = document.getElementsByClassName('deletebutton');
    
        for (let i = 0; i < deletebtns.length; i++) {
            const deletebutton = deletebtns[i];
            deletebutton.onclick = function(e) {
                const todoId = e.target.dataset['id'];
                fetch('/todos/' + todoId, {
                    method: 'DELETE',
                    });
                }
        }
constdeletebtns=document.getElementsByClassName('deletebutton');
for(设i=0;i
app.py:

@app.route('/todos/<todo_id>', methods=['DELETE'])
def delete_todo(todo_id):
  try:
    Todo.query.filter_by(id=todo_id).delete()
    db.session.commit()
  except:
    db.session.rollback()
  finally:
    db.session.close()
  return jsonify({ 'success': True })
@app.route('/todos/',方法=['DELETE'])
def delete_todo(todo_id):
尝试:
Todo.query.filter\u by(id=Todo\u id).delete()
db.session.commit()
除:
db.session.rollback()
最后:
db.session.close()
返回jsonify({'success':True})
我应该这样做

如果从网页中的任何位置调用此方法,网页将重新加载。此重新加载将通过web缓存进行。缓存究竟是什么?它是浏览器保留的临时空间,用于存储从服务器检索的文档、图像和其他数据。数据缓存允许浏览器加快您的浏览速度,并允许您更快地重新加载经常访问的站点

通过设置forceGet参数,可以更改默认缓存重新加载。这将导致浏览器通过重新从服务器获取数据而不是使用缓存来重新加载网页。这可以通过使用以下代码来实现:

location.reload(true);
默认情况下,forceGet参数的值为false。这意味着location.reload方法始终如下所示:

location.reload(false)
location.reload(false)