Django Todo应用搜索后无整页刷新更新div元素的问题求助

完整修改方案 #

你只需要按照以下3处修改代码即可实现需求，不需要额外学习JavaScript相关知识： #

1. 替换index.html的JavaScript代码 #

首先确认你已经在页面中引入了jQuery，未引入的话可以下载jQuery静态文件放到项目静态资源目录后引入即可。
然后把原来的<script>块内容全部替换为以下代码：

<script type="text/javascript">
$(function() {
    // 绑定搜索表单提交事件
    $('form[action="/searchlist/"]').submit(function(e) {
        // 阻止默认提交刷新页面的行为
        e.preventDefault();
        // 获取输入的搜索关键词
        let keyword = $(this).find('input[name="content"]').val();
        // 请求搜索接口并将返回的表格直接渲染到指定容器
        $('#list').load('/searchlist/', {
            'content': keyword,
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        });
    });
});
</script>

2. 修正searchlistdiv.html的变量笔误 #

你当前的模板中删除按钮的ID变量写错了，将对应行的{{todo_items.id}}替换为{{result.id}}即可：

<form action="/deleteTodo/{{result.id}}/" style="display: inline; " method="post">

3. 确认urls.py路由配置 #

确保你的项目urls.py中已经添加了对应视图的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他原有路由
    path('searchlist/', views.searchtodolist, name='search_todo'),
]

修改完成后点击搜索按钮即可无刷新加载匹配的待办列表。

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