在Django模板中使用Ajax更新元素

Question

因此，我有一个按钮，它想将“项目”“添加”到列表中并在不刷新的情况下更新同一页面上的列表。

添加项目而不进行重定向有效。 但该元素未正确刷新

这是我的脚本：

<div id="list">
    {% for item in items %}
        {{ item.name }}
    {% endfor %}
</div>

<button id="add" type="submit">+</button>

<script>
    $('#add').click(function () {
        $.get('/url/page/', function (data) {
            $('#list').html(data);
        });
    });
</script>

views.py

def add_to_list(request, item_id, list_id): 
      item, created = List.objects.get_or_create(list_id=list_id, 
      item_id=item_id)
     return HttpResponse(request)

我觉得我必须在视图中添加一些内容吗？ 也许使用json代码？

Answer 1

您应该将请求的结果附加到div元素。 尝试这个：

 $('#add').click(function () {
    $.get('/url/page/', function (data) {
        $('#list').append(data);
    });
});

假设您从GET请求接收的data不是对象，而是一个字符串。 如果是对象，请添加data.name ：

$('#list').append(data.name)

希望能帮助到你。