Django使用ajax更新表数据答案

【问题标题】：Django update table data using ajaxDjango使用ajax更新表数据
【发布时间】：2020-04-18 05:16:51
【问题描述】：

我正在尝试过滤表数据，然后使用 ajax 更新表。我有：

过滤形式：

<form id="search" method="POST" action="{% url 'article-filter' %}">
    <input type="text" class="form-control" id="tokenfield1" name="txtSearch">
    <button type="submit" class="btn btn-default js-filter">Submit</button>
</form>

views.py

def article_filter(request):
    data = dict()
    if request.method == 'POST': 
        search = request.POST.get('txtSearch')
        articles = Article.objects.filter(title = search)
        context = {
                   'articles': articles
        }
        data['html_table'] = render_to_string('blog/article_table.html',
                             context,
                             request = request
                             )
        return JsonResponse(data)

ajax 处理程序：

<script>
    var filter =
    function() {

        $.ajax({
            type: "POST",
            url: "blog/article-filter", 
            dataType: 'json',
        success: function(response) {
            $('#article-table').html(response.html_table);
        }
        });
    };

    $("#search").on("submit", ".js-filter", filter);
</script>

但是当我提交表单时，它只打印出原始 html 文本（表格），我如何实际替换页面内的表格并呈现它？

【问题讨论】：

标签： javascript html django ajax forms

【解决方案1】：

所以问题是 ajax 甚至没有发生。我编辑了 ajax 以形成提交而不是提交按钮：

$("#search").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "blog/article-filter",
        dataType: 'json',
    }).done(function(data) {
        $('#article-table').html(data.html_table);
    });
});

而且它工作得很好。

【讨论】：