【发布时间】：2023-04-09 00:18:01
【问题描述】：
每当有人访问 URL /project_page 时，我都有一个表格显示模型中的内容。
在该页面上，用户可以添加文件，我希望表格能够实时更新，而无需不断刷新。
为此，我尝试实现一个每隔几秒更新一次表格内容的 Ajax 函数。因为这是几年前提出的建议here
我认为该功能已实现，并且我在 Ajax 成功功能中正确收到了data，但我不知道如何将其“注入”到表中。
我也想知道是否有更优化或pythonic的方式来实现这个结果。
urls.py
path('project_page_ajax/', views.project_page_ajax, name='project_page_ajax'),
views.py
@login_required
def project_page(request):
context = {}
context['nbar'] = 'projects'
if request.method == 'POST':
print(request.FILES)
form = UploadFileForm(request.POST, request.FILES)
if form.is_valid():
file_hist = form.save(commit=False)
file_hist.user = request.user
# file is saved
file_hist.save()
file_hist_results = FileHistory.objects.all().filter(user=request.user)
context['file_hist_results'] = file_hist_results
print(type(context['file_hist_results']))
return render(request, 'project_page.html', context)
print (form.errors)
else:
form = UploadFileForm()
file_hist_results = FileHistory.objects.all().filter(user=request.user)
context['file_hist_results'] = file_hist_results
context['form'] = form
return render(request, 'project_page.html', context)
@login_required
def project_page_ajax(request):
response = dict()
if request.method == 'GET':
file_hist_results = FileHistory.objects.all().filter(user=request.user).values()
#response.update({'file_hist_results': file_hist_results})
return JsonResponse({"file_hist_results": list(file_hist_results)})
return HttpResponse('')
project_page.html（JS 部分）
var intervalID = setInterval(updateTable, 10000);
function updateTable()
{
$.ajax({
method: "GET",
url: "/project_page_ajax/",
success: function(data, textStatus, request) {
console.log(data);
}
});
}
project_page.html(HTML 部分)
<table id="ittFileUploadTable" class="display nowrap" width="100%">
<thead>
<tr class="ittLineItemsTh">
<th style="text-align:center;">File Name</th>
<th style="text-align:center;">Submitted</th>
<th style="text-align:center;">Updated</th>
<th style="text-align:center;">User</th>
<th style="text-align:center;">Action</th>
</tr>
</thead>
<tbody>
{% for histfiles in file_hist_results %}
<tr>
<td>{{ histfiles.filename }}</td>
<td>{{ histfiles.uploaded }}</td>
<td>{{ histfiles.updated }}</td>
<td>{{ histfiles.user }}</td>
<td>
<button id="delete-itt-file" type="button" class="btn btn-secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path>
</svg>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
【问题讨论】：
-
尝试更新你的标签这个问题与javascript或jquery更相关
-
按照建议添加了 JS ;)
-
project_page url 名称是什么？因为在
form.is_valid()内部，最好重定向用户而不是呈现当前页面的 html。 -
path('project_page', views.project_page, name='project_page'), -
不要使用jQuery Ajax，Datatables 自带的Ajax 功能更适合这个任务。 datatables.net/manual/ajax 从您的服务器返回 JSON 数据并配置您希望您的表在 DataTables 选项中的外观。
标签： javascript jquery django ajax datatable