Django 使用 AJAX 更新 HTML 表

Question

好的，我试图理解这里的所有帖子，但我无法理解。有些已经过时，有些与我的问题不相似。

别介意我再问。

我有一个简单的 HTML 表格，其中包含一些数据，我只需要在数据更改时更新数据，而不需要刷新它。

对象具有“is_locked”字段，我需要做的是，当对象被锁定时（is_locked=True），会显示一个小储物柜图标。我可以做到所有这些，但是在手动刷新之后，这并不好。

因此，当用户锁定对象时，重定向（页面刷新）后，储物柜图标会显示。但是我需要实时的，所以当两个用户同时查看同一张表时，在对象锁定（来自一个用户）之后，该图标需要出现在另一个用户的浏览器上，而无需刷新页。

我只需要在用户锁定对象时实时显示“额外”内容（储物柜图标）。

尽量忽略自定义名称（它们不是英文的）

---

我的模型.py：

from django.db import models

class OpportunityList(models.Model):
    name = models.CharField(max_length=30, blank=True)
    address = models.CharField(max_length=100, blank=True)
    age = models.IntegerField(blank=True, null=True)
    is_locked = models.BooleanField(blank=True, null=True)
    ...

views.py：

from django.http import JsonResponse
from django.shortcuts import render

from .models import OpportunityList
...
@login_required(login_url='registration/login')
def OptikaList(request):
    optika = OpportunityList.objects.all().filter(opp_type='optika')
    context = {
        'optika': optika
    }

    if request.is_ajax():
        data = {'rendered_table':render_to_string('opportunity/get_more_tables.html', context=context)}
        return JsonResponse(data)

    return render(request, 'opportunity/opp_optika.html', context)


def updateTable(request):
    qs = OpportunityList.objects.all().values()
    return JsonResponse({'users': list(qs)})

urls.py：

from django.urls import path
from .views import *

urlpatterns = [
    ...
    path('optika/', OptikaList, name='optika'),
    path('ajax/update/', update_table, name='update_table'),
    ...

opp_optika.html，表格所在的位置，带有ajax脚本。

{% extends 'base.html' %}
{% load static %}
{% block title %} Optika {% endblock %}
{% block content_row %}

    {% if messages %}
        {% for message in messages %}
            <div class=" container-fluid alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4 class="alert-heading">Uspešno!</h4>
                <hr>
                <p class="mb-0">{{ message }}</p>
            </div>
        {% endfor %}
    {% endif %}

    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table table-hover dt-responsive" id="dataTable">
                {% include 'opportunity/opp_breadcrumb.html' %}
                <h2 style="margin-left: 50%;">OPTIKA</h2>

                <thead>
                <tr>
                    <th>Adresa Korisnika</th>
                    <th>Područje</th>
                    <th>Korisnik</th>
                    <th>TIS</th>
                    <th>Napomena</th>
                    <th>Akcije</th>
                    <th style="width: 5px">STATUS</th>
                </tr>
                </thead>
                <tbody>
                {% for opp in optika %}
                    <tr>
                        <td>{{ opp.optika_korisnik_adr }}</td>
                        <td>{{ opp.oppc_place }}</td>
                        <td>{{ opp.optika_korisnik }}</td>
                        <td>{{ opp.optika_korisnik_tis_id }}</td>
                        <td>{% if opp.oppc_comment %}{{ opp.oppc_comment }}{% else %}Bez napomene{% endif %}</td>
                        <td>
                            <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#detalji_modal{{ opp.pk }}">
                                Detalji
                            </button>
                        </td>
                        <td>
                            {% if opp.is_locked %}
                                <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                                      style="display: table-cell">
                                    {% csrf_token %}
                                    <button class="btn"><i style="width: 50px;color: red" class="fa fa-lock"
                                                           aria-hidden="true"></i></button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                    <!------------------------------------- DETALJIMODAL ---------------------------------------------->
                    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
                         id="detalji_modal{{ opp.pk }}"
                         aria-labelledby="detalji_modalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="detalji_modalLabel">Detalji</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body" id="">
                                    <div class="container-fluid">
                                        <h5>{{ opp.optika_korisnik }}</h5>
                                        <p>{{ opp.optika_korisnik_adr.title }}</p>
                                        <p>Broj linije : {{ opp.optika_broj_linije }}</p>
                                        <p>Kontakt : {{ opp.optika_kontakt_tel1 }}</p>
                                        <hr>
                                        <p>Okvirni Datum : {{ opp.optika_instal_okvirni_datum }}</p>
                                        <p>TIS Posla : {{ opp.optika_posao_tis_id }}</p>
                                        <p>Zahtev Info : {{ opp.optika_zahev_uneo }}</p>
                                        <hr>
                                        <p>Datum Unosa : {{ opp.optika_zahtev_datum_unosa }}</p>
                                        <hr>
                                        <p>Napomena : <br> <br>
                                            {% if opp.oppc_comment %} {{ opp.oppc_comment }} {% else %} Nema
                                                napomene za korisnika {{ opp.optika_korisnik|title }}. {% endif %}
                                        </p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <p style="margin-right: auto">Zahtev uneo/la : {{ opp.optika_zahev_uneo }}</p>
                                    {% if not opp.is_locked %}
                                        <form action="{% url 'opportunity:poziv' opp.pk %}" method="POST">
                                            {% csrf_token %}
                                            <button type="submit" name="poziv" class="btn btn-outline-danger">
                                                Poziv
                                            </button>
                                        </form>
                                    {% endif %}
                                    {% if opp.is_locked %}
                                        <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                                              style="display: table-cell">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-dark">
                                                <i class="fas fa-lock-open"></i>
                                                Otključaj
                                            </button>
                                        </form>
                                    {% endif %}
                                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
                                        Zatvori
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!------------------------------------ DETALJI ENDMODAL ------------------------------------------->
                {% endfor %}
                </tbody>
            </table>
        </div>
        <script>
            $(document).ready(function () {
                setInterval(function () {
                    $.ajax({
                        url: '{% url 'opportunity:optika' %}',
                        type: "get",
                        cache: true,
                        dataType: 'html',
                        success: function (data) {
                            console.log("success");
                            $('#dataTable').html(data.rendered_table);
                        },
                        error: function (data) {
                            alert("Got an error dude " + data);
                        }
                    });
                }, 5000);
            });
        </script>
{% endblock content_row %}

get_more_tables.html：

<tr>
    <th>Adresa Korisnika</th>
    <th>Područje</th>
    <th>Korisnik</th>
    <th>TIS</th>
    <th>Napomena</th>
    <th>Akcije</th>
    <th style="width: 5px">STATUS</th>
</tr>
{% for opp in optika %}
    <tr>
        <td>{{ opp.optika_korisnik_adr }}</td>
        <td>{{ opp.oppc_place }}</td>
        <td>{{ opp.optika_korisnik }}</td>
        <td>{{ opp.optika_korisnik_tis_id }}</td>
        <td>{% if opp.oppc_comment %}{{ opp.oppc_comment }}{% else %}Bez napomene{% endif %}</td>
        <td>
            <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                    data-target="#detalji_modal{{ opp.pk }}">
                Detalji
            </button>
        </td>
        <td>
            {% if opp.is_locked %}
                <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                      style="display: table-cell">
                    {% csrf_token %}
                    <button class="btn"><i style="width: 50px;color: red" class="fa fa-lock"
                                           aria-hidden="true"></i></button>
                </form>
            {% endif %}
        </td>
    </tr>
    <!------------------------------------- DETALJIMODAL ---------------------------------------------->
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
         id="detalji_modal{{ opp.pk }}"
         aria-labelledby="detalji_modalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detalji_modalLabel">Detalji</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="">
                    <div class="container-fluid">
                        <h5>{{ opp.optika_korisnik }}</h5>
                        <p>{{ opp.optika_korisnik_adr.title }}</p>
                        <p>Broj linije : {{ opp.optika_broj_linije }}</p>
                        <p>Kontakt : {{ opp.optika_kontakt_tel1 }}</p>
                        <hr>
                        <p>Okvirni Datum : {{ opp.optika_instal_okvirni_datum }}</p>
                        <p>TIS Posla : {{ opp.optika_posao_tis_id }}</p>
                        <p>Zahtev Info : {{ opp.optika_zahev_uneo }}</p>
                        <hr>
                        <p>Datum Unosa : {{ opp.optika_zahtev_datum_unosa }}</p>
                        <hr>
                        <p>Napomena : <br> <br>
                            {% if opp.oppc_comment %} {{ opp.oppc_comment }} {% else %} Nema
                                napomene za korisnika {{ opp.optika_korisnik|title }}. {% endif %}
                        </p>
                    </div>
                </div>
                <div class="modal-footer">
                    <p style="margin-right: auto">Zahtev uneo/la : {{ opp.optika_zahev_uneo }}</p>
                    {% if not opp.is_locked %}
                        <form action="{% url 'opportunity:poziv' opp.pk %}" method="POST">
                            {% csrf_token %}
                            <button type="submit" name="poziv" class="btn btn-outline-danger">
                                Poziv
                            </button>
                        </form>
                    {% endif %}
                    {% if opp.is_locked %}
                        <form action="{% url 'opportunity:delete_locked' opp.pk %}" method="POST"
                              style="display: table-cell">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-dark">
                                <i class="fas fa-lock-open"></i>
                                Otključaj
                            </button>
                        </form>
                    {% endif %}
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal">
                        Zatvori
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!------------------------------------ DETALJI ENDMODAL ------------------------------------------->
{% endfor %}

Answer 1

您的代码中存在许多问题。

您当前的 AJAX 调用的作用：它调用您的 displayUser 视图。此视图呈现整个 crud.html 模板（包括 javascript！）并返回它。您的 javascript 将其放在您定义的位置。因此，在第一次 AJAX 调用之后，您会得到一些带有两个 javascript 块的嵌套表结构，它们都以并行方式运行。

然后这两个函数开始再次调用视图来接收完全渲染的页面。因此，一段时间后，您会得到一个混乱的网页，其中包含并行运行的多个脚本，将完全渲染的页面放在所有地方。这肯定会吃掉内存。

您可以做的是检查您的 request 是否是一个 ajax 请求，在这种情况下只渲染内部表并将其返回给您的 javascript：

def displayUser(request):
    users = CrudUser.objects.all()
    context = {
        'users': users
    }

    if request.is_ajax():
        data = {'rendered_table': render_to_string('table_contents.html', context=context)}
        return JsonResponse(data)

    return render(request, 'crud.html', context) 

内表的子模板：

# table_contents.html
<tr>
    <th>Name</th>
    <th>Address</th>
    <th>Age</th>
</tr>
{% for user in users %}
    <tr>
        <td>{{ user.name }}</td>
        <td>{{ user.address }}</td>
        <td>{{ user.age }}</td>
    </tr>
{% endfor %}

现在您可以将其放入您的 javascript 模板中

$('#_appendHere').html(data.rendered_table);

最后一点：在您的 ajax 函数中，我认为它应该是 data_type 而不是 dataType。