搜索后 django 刷新 div 元素

Question

我正在尝试创建一个待办事项应用程序，当我搜索一个词时它会显示 table 而无需刷新整个页面。

这是我的 index.html

<body>
<h2>My Personal TodoApp Project</h2>
<br>
<form action="/searchlist/" method="get">{%csrf_token%}
   <input type="text" name="content" placeholder="Search a todolist" class="form-control">
   <input class="button button2" type="submit" name="submit" value="Search"/>
</form>
# where i want my table diplay after searching a particular word
<div id="list"></div>
<script type="text/javascript">
   $.ajax({
   var url = '/templates/searchlistdiv/',
   $('#list).show();
   var div = $('#list');
   div.load(url);
)}
</script>
</body>

和我的views.py

def searchtodolist(request):
if request.method == 'GET':
    query = request.GET.get('content', None)
    if query:
        results = Todoitem.objects.filter(content__contains=query)
        return render(request, 'searchlistdiv.html', {"results": results})
return render(request, 'searchlistdiv.html')

最后是我的 searchlistdiv.html

<table>
<tr>
    <th colspan="2">List of Todos</th>
</tr>
{% for result in results %}
<tr>
    <td>{{result.content}}</td>
    <td><form action="/deleteTodo/{{todo_items.id}}/" style="display: inline; " method="post"> 
{%csrf_token%}
    <input class="button button1" type="submit" value="Delete"/>
    </form></td>
</tr>
{% endfor %}
</tr>
</table>

我 100% 确定我的 js 缺少一些东西我只是不知道我真正不打算学习 js 的是什么但仍然试图专注于后端开发部分（也许将来我会学习前端 -结束）

Answer 1

你可以这样做：

<form id="form_id" action="" method="get">{%csrf_token%}
   <input type="text" name="content" placeholder="Search a todolist" class="form-control">
   <input class="button button2" type="submit" name="submit" value="Search"/>
</form>

<script>
    $("#form_id").submit(function (e) {
        e.preventDefault(); //this is what i use do prevent default action. [send request without refreshing the whole page]
        var serializedData = $(this).serialize();
        $.ajax({
        type: 'GET',
        url: "{% url '/searchlist/' %}", //url to your view.
        data: serializedData,
        success: function (response) {
            $("#list").html(response.searchlistdiv); // Where $("#list") is the container of "searchlistdiv"
        },
        error: function (response) {
            alert('Error');
        }
        })
    })
</script>

在你的 views.py:

from django.template.loader import render_to_string
from django.http import JsonResponse
def searchtodolist(request):
    if request.method == 'GET':
        query = request.GET.get('content', None)
        if query:
            results = Todoitem.objects.filter(content__contains=query)
            d_partner_html = render_to_string("searchlistdiv.html", {"results": results}, request)
            return JsonResponse({'searchlistdiv': d_partner_html})

    return render(request, 'searchlistdiv.html')

搜索后 django 刷新 div 元素

django refresh div element after search

javascript

ajax

django-templates

django-views