在 Django 中以 html 模式加载动态数据

Posted 2023-02-24

【中文标题】在 Django 中以 html 模式加载动态数据

【英文标题】：load dynamic data in html modal in Django

【发布时间】：2021-03-30 02:46:14

【问题描述】：

我在 Django 中有一个带有来自数据库的动态图像的 html 页面。 我在同一页面中也有一个模式设置为不可见，并在单击图像时打开。

我的意图是当我单击任何图像时，它应该打开一个带有单击图像的 html 模型及其来自 db 的描述文本。

如何显示当前点击图片的数据及其描述。 我试图传递profile.image.url，但这提供了一个关于点击所有图像的信息。

我不必为此提供示例代码。

【参考方案1】：

您可以通过传递要使用 AJAX 请求检索的对象的 id 来实现此目的。

假设这是你的 HTML 表格

<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Date</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    % for incident in page_obj %
      <tr>
        <td> incident.id </td>
        <td> incident.title </td>
        <td> incident.created </td>
        <td>
          <span class="badge badge-pill badge-success"> incident.get_status_display </span>
        </td>
        <td>
          <button class="btn btn-sm btn-outline-info" onclick="populateForm(' incident.id ')" data-toggle="modal" data-target="#incidentModal">Edit</button>
        </td>
      </tr>
    % endfor %
  </tbody>
</table>

根据你的模型和字段使用这种类型的函数

 function populateForm(id) 
    $.ajax(
      url: "% url 'incidents:update' 1 %".replace("1", id),
      type: "GET",
      success(response) 
        let incident = JSON.parse(response)[0].fields;
        $("#id_title").val(incident.title);
        $("#id_description").val(incident.description);
        $("#id_responder").val(incident.responder);
        $("#id_status").val(incident.status);
        $("#id_functional_impact").val(incident.functional_impact);
        $("#id_information_impact").val(incident.information_impact);
        $("#id_recovery_impact").val(incident.recovery_impact);
      ,
    );
  

views.py

from django.core import serializers
from django.http import JsonResponse, Http404
from django.views.generic import UpdateView
from incidents.models import Incident
from incidents.forms import IncidentForm


class IncidentUpdateView(UpdateView):
    form_class = IncidentForm
    model = Incident

    def get_success_url(self):
        return reverse('incidents:list')

    def get(self, request, pk):
        if request.is_ajax():
            incident = get_object_or_404(Incident, pk=pk)
            response = serializers.serialize("json", [incident])
            return JsonResponse(response, safe=False)
        raise Http404('Page not found')

【讨论】：

嗨！好答案！我有同样的问题。我有一个用户网格和每个用户的删除按钮。我想在按下此按钮时打开一个模式，说“您确定要删除用户“用户名”吗？所以在确认我要删除用户时。我无法在网格中“存储”选定的用户”并将其传递给不使用ajax的模态？谢谢***.com/questions/66028775/…

您好，很抱歉回复晚了。您可以将 javascript 函数附加到按钮的 onclick 方法，并将其中的用户 ID 作为参数传递。在该函数中，您可以使用用户 ID 设置删除表单的操作。因此，每当用户单击“删除”按钮时，该功能将更改表单的操作并出现一个模式，并在确认它将提交最终导致用户被删除的表单。希望对您有所帮助。

【参考方案2】：

有两种方法可以实现这一点：

使用 django 为所有图像呈现模态，并在用户单击其中一张图像时打开它们。 创建 1 个模态并编写一些 javascript 以在后台获取有关单击图像的信息。请注意，您还需要在 Django 中创建一个端点，该端点将接受图像 ID 并返回图像信息。