如何通過Django中的Ajax提交表單並僅重新加載頁面的一部分？

我想使用Django/jQuery過濾一個公司簡單的數據庫，而無需重新加載頁面。在頁面的頂部，有許多複選框，用戶可以在其中例如選擇國家。在這些複選框下方，有一個包含適當數據庫條目的表格。我試圖用jQuery的load（）函數實現我的目標，但是整個頁面不斷重新加載，而不是我需要的div id。如何通過Django中的Ajax提交表單並僅重新加載頁面的一部分？

我的模板（main_view.html）看起來是這樣的：

<form id="filters"> 
<input type="checkbox" id="USA" name="s" value="USA">USA 
<input type="checkbox" id="UK" name="s" value="UK">UK 
<button id="submitButtonId">Submit</button> 
</form> 

<div id="companylist"> 
<tr> 
    <td><b>Name</b></td> 
    <td><b>Country</b></td> 
</tr> 
{% for company in companies %} 
<tr> 
    <td>{{ company.name }}</td> 
    <td>{{ company.country }}</td> 
</tr> 
{% endfor %} 
</table> 
</div> 

<script> 
$("#submitButtonId").click(function() { 
$.ajax({ 
    type: "GET", 
    url: "/", 
    dataType: "html", 
    data: $("#filters").serialize(), 
    success: function(data) 
    { 
     $(#companylist).load('?' + data #companylist) 
    } 
    }); 
return false; 
}); 
</script>

我views.py的結構是這樣的：

def main_view(request): 
    filter_countries = request.GET.getlist('c') 
    if filter_query: 
     companies = Company.objects.filter(country__in=filter_countries) 
    else: 
     companies = Company.objects.all() 
    return render(request, 'database/main_view.html', {'companies': companies})

來源

2016-04-21 Erya

您正在嘗試使用Ajax和JQuery更新DOM。 Django，或者你使用的任何後端無關緊要。 –

你沒有張貼主view.html代碼。確保這個html模板只是你想要刷新的部分。不是整個頁面

來源

2016-04-21 16:42:10 durdenk

這是main_view.html（除外）。 – Erya

如何通過Django中的Ajax提交表單並僅重新加載頁面的一部分？

回答

相關問題