使用JQuery和AJAX刷新Django中的div-Django ForLoop问题

Question

我有一个django项目，我正试图添加一个自定义的"在线"；state到(模型中的布尔字段(。我想定期刷新div，以显示用户现在是否在线。用类button-refresh刷新的div位于包含的HTML文件中。

问题是include不适用于原始HTML文件中的for循环；专业人士"；从服务器检索数据。我对django还很陌生，我的假设是refresh_professionals.html文件是通过ajax请求检索的，它与all_professionals.html完全分离，然后被包括在内，而不是for循环的一部分，这意味着{{ professional.professional_profile.online }}语法不起作用。

关于如何解决这个问题有什么想法吗？如果有更好的方法，请告诉我。谢谢

all_processionals.html

{% for professional in professionals %}
...
{{ professional.name }}
{% include 'professionals/refresh_professionals.html' %}
...
{% endfor %}
...
{% block postloadjs %}
{{ block.super }}
<script>var global_url = "{% url 'refresh_professionals' %}";</script>
<script src="{% static 'professionals/js/professionals.js' %}"></script>
{% endblock %}

refresh_processionals.html

<div class="col button-refresh">
{% if professional.professional_profile.online is True %}
<p class="custom-button mb-1 w-25 mx-auto">Chat</p>
{% else %}
<p class="custom-button-disabled mb-1 w-25 mx-auto">Unavailable</p>
{% endif %}
<p>{{ professional.price_chat }}/min</p>    
</div>

专业人士.js

$(document).ready(function(){
setInterval(function() {
$.ajax({
url: global_url,
type: 'GET',
success: function(data) {
$('.button-refresh').html(data);
}
});
}, 5000)
});

urls.py

urlpatterns = [
path('', views.view_all_professionals, name='view_all_professionals'),
path('refresh/', views.refresh_professionals, name='refresh_professionals'),
]

视图.py

def view_all_professionals(request):
"""A view to return the professionals page"""
professionals = Professional.objects.all()
languages = Languages.objects.all()
context = {
'professionals': professionals,
'languages': languages,
}
return render(request, 'professionals/all_professionals.html', context)

def refresh_professionals(request):
"""A view to refresh the online button section"""
professionals = Professional.objects.all()
context = {
'professionals': professionals,
}
return render(request, 'professionals/refresh_professionals.html', context)

编辑

我听从了Daniel的建议，现在返回一个JSON对象。这是更新后的代码

专业人士.js

$(document).ready(function(){
setInterval(function() {
$.ajax({
url: global_url,
type: 'GET',
success: update_professionals, 
});
}, 5000)
});
function update_professionals(response){
// unpack the response (context) from our view function:
var professionals = response.professionals; 
// update html:
var i;
for (i = 0; i < professionals.length; i++) {
$('#professional-name' + i).text('professionals.name' + i);
};
};

视图.py

def refresh_professionals(request):
"""A view to refresh the professionals section page"""
professionals = Professional.objects.all()
professionals = serializers.serialize("json", professionals)
context = json.dumps({
'professionals': professionals,
})
return HttpResponse(context)

我现在面临的问题是参考专业人士的数据。它正在返回未捕获的错误。forloop是必要的，因为在我的HTML中，我有一系列ID，使用django-forloop.counter在末尾附加了一个数字。如果有任何建议，我们将不胜感激。谢谢

Answer 1

好吧，假设我们有一个这样的视图函数：

from django.http import HttpResponse
import json
def refresh_professionals(request):
"""A view to refresh the online button section"""
professionals = Professional.objects.all()
# convert to json friendly format:
professionals = ... 
context = json.dumps({
'professionals': professionals,
})
return HttpResponse(context)

这是假设专业人士现在看起来像(实际结构显然会有所不同(：

professionals = {"id":1, "name":"Jason"}

现在，在我们的js文件中，我们应该有一个这样的ajax请求(封装在setInterval方法中，等等(：

$.ajax({
url: global_url,
type: 'GET',
success: update_professionals, // reference to an ajax-success function
});

我们的成功功能是这样的：

update_professionals(response) {

// unpack the response (context) from our view function:
// use JSON.parse() to convert a string to json
var professionals = JSON.parse(response.professionals); 
// update html:
$('#professional-name').text(professionals.name)
}

这假设我们有这样一个HTML元素：

<div id="professionals-name"> Sue </div>

不同的是，我们使用js来动态更新HTML，而不是试图重新呈现HTML模板。这可能需要页面刷新。