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

Question

我有一个 django 项目，我正在尝试将自定义“在线”状态添加到（模型中的布尔字段）。我想定期刷新一个 div 以显示用户现在是否在线。刷新的 div 类为 button-refresh，位于包含的 HTML 文件中。

问题是包含不适用于原始 HTML 文件中的 for 循环，没有从服务器检索到任何“专业”数据。我对 django 很陌生，我的假设是 refresh_professionals.html 文件是通过 ajax 请求检索的，并且与 all_professionals.html 完全分开，然后包含在内，而不是 for 循环的一部分，这意味着 @987654322 @ 语法不起作用。

关于如何解决此问题的任何想法？如果有更好的方法可以做到这一点，请告诉我。谢谢。

all_professionals.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_professionals.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>

professionals.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'),
]

views.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 对象。这是更新的代码

professionals.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);
    };
};

views.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 中，我使用 django forloop.counter 获得了一系列带有数字的 ID。任何意见，将不胜感激。谢谢。

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 模板，这可能需要刷新页面。