搜索后django刷新div元素答案

【问题标题】：django refresh div element after search搜索后django刷新div元素
【发布时间】：2021-10-11 19:44:09
【问题描述】：

我正在尝试创建一个 todoapp，当我搜索一个单词时它会显示表格而不刷新整个页面。

这是我的 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>

还有我的观点.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，但仍试图专注于后端开发部分（也许将来我会学习前端）

【问题讨论】：

标签： javascript ajax django-views django-templates

【解决方案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')

【讨论】：

感谢您的回答，似乎它在做某事但是没有显示我添加了 searchdiv.html