在django模板中使用Ajax來更新元素

Question

所以我有一個按鈕，它假設將一個「Item」添加到列表中，並更新同一頁面上的列表而不刷新它。

在沒有重定向的情況下添加項目。但該元素不正確刷新

這裏是我的腳本：

<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) 

希望它有幫助。