如何在Django中用AJAX、模态框结合通用视图实现对象增删改？

我刚好做过类似的实现，分享个简单易懂的方案给你——结合Django的通用视图、官方的AjaxableResponseMixin（做了点适配调整）和jQuery，完全能在模态框里搞定创建、更新、删除的AJAX操作，步骤很清晰：

官方的Mixin只处理了JSON返回，但模态框需要在表单验证失败时重新渲染带错误的表单，所以我们调整一下：

from django.http import JsonResponse
from django.template.loader import render_to_string

class AjaxableResponseMixin:
    """适配模态框的AJAX表单Mixin"""
    def form_invalid(self, form):
        response = super().form_invalid(form)
        if self.request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            # 返回带错误的表单HTML，让模态框更新显示
            html = render_to_string(
                self.template_name, 
                {'form': form}, 
                request=self.request
            )
            return JsonResponse({'status': 'error', 'html': html})
        return response

    def form_valid(self, form):
        response = super().form_valid(form)
        if self.request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            # 成功时返回操作结果，可选返回新对象的HTML片段用于更新列表
            data = {
                'status': 'success',
                'message': '操作成功',
                'object_html': render_to_string(
                    'partials/object_item.html', 
                    {'object': self.object}, 
                    request=self.request
                )
            }
            return JsonResponse(data)
        return response

把Mixin和Django的通用视图结合，分别实现创建、更新、删除：

创建视图 #

from django.views.generic.edit import CreateView
from .models import YourModel
from .forms import YourModelForm

class YourModelCreateView(AjaxableResponseMixin, CreateView):
    model = YourModel
    form_class = YourModelForm
    template_name = 'modals/yourmodel_form.html'  # 模态框专用的表单模板

更新视图 #

from django.views.generic.edit import UpdateView

class YourModelUpdateView(AjaxableResponseMixin, UpdateView):
    model = YourModel
    form_class = YourModelForm
    template_name = 'modals/yourmodel_form.html'

删除视图 #

删除操作单独处理AJAX响应：

from django.views.generic.edit import DeleteView
from django.http import JsonResponse

class YourModelDeleteView(DeleteView):
    model = YourModel
    success_url = '/your-object-list/'  # 替换成你的列表页URL

    def delete(self, request, *args, **kwargs):
        self.object = self.get_object()
        self.object.delete()
        if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
            return JsonResponse({'status': 'success', 'message': '删除成功'})
        return super().delete(request, *args, **kwargs)

在主页面里放模态框容器、操作按钮和对象列表：

主页面核心片段 #

<!-- 创建按钮 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#modal-form" data-url="{% url 'yourmodel_create' %}">
  创建新对象
</button>

<!-- 对象列表 -->
<div id="object-list">
  {% for obj in object_list %}
    <div class="object-item" id="object-{{ obj.pk }}">
      {{ obj.name }}
      <!-- 编辑按钮 -->
      <button class="btn btn-sm btn-warning edit-btn" 
              data-toggle="modal" 
              data-target="#modal-form" 
              data-url="{% url 'yourmodel_update' obj.pk %}">
        编辑
      </button>
      <!-- 删除按钮 -->
      <button class="btn btn-sm btn-danger delete-btn" 
              data-url="{% url 'yourmodel_delete' obj.pk %}">
        删除
      </button>
    </div>
  {% endfor %}
</div>

<!-- 通用模态框容器 -->
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content" id="modal-content">
      <!-- 表单内容会通过AJAX加载到这里 -->
    </div>
  </div>
</div>

模态框表单模板（modals/yourmodel_form.html） #

<div class="modal-header">
  <h5 class="modal-title">{% if object %}编辑{% else %}创建{% endif %}对象</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<form method="post" action="{{ request.path }}" class="ajax-form">
  {% csrf_token %}
  <div class="modal-body">
    <!-- 这里可以自定义表单渲染，比如用bootstrap的表单样式 -->
    {{ form.as_p }}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
    <button type="submit" class="btn btn-primary">保存</button>
  </div>
</form>

这部分是核心，负责加载模态框表单、提交表单、处理删除：

$(document).ready(function() {
  // 加载模态框表单（创建/编辑）
  $('#modal-form').on('show.bs.modal', function(e) {
    const triggerBtn = $(e.relatedTarget);
    const url = triggerBtn.data('url');
    const modal = $(this);

    $.ajax({
      url: url,
      type: 'GET',
      success: function(data) {
        modal.find('#modal-content').html(data);
      }
    });
  });

  // 提交AJAX表单
  $(document).on('submit', '.ajax-form', function(e) {
    e.preventDefault();
    const form = $(this);
    const url = form.attr('action');
    const modal = $('#modal-form');

    $.ajax({
      url: url,
      type: form.attr('method'),
      data: form.serialize(),
      headers: {'X-Requested-With': 'XMLHttpRequest'},
      success: function(res) {
        if (res.status === 'success') {
          modal.modal('hide');
          // 更新对象列表：编辑则替换对应项，创建则添加到顶部
          const objectId = form.find('[name="id"]').val();
          if (objectId) {
            $(`#object-${objectId}`).replaceWith(res.object_html);
          } else {
            $('#object-list').prepend(res.object_html);
          }
          alert(res.message); // 可以换成Toast等更友好的提示
        }
      },
      error: function(xhr) {
        // 表单验证失败，更新模态框里的表单
        modal.find('#modal-content').html(xhr.responseJSON.html);
      }
    });
  });

  // 处理删除操作
  $(document).on('click', '.delete-btn', function(e) {
    e.preventDefault();
    const btn = $(this);
    const url = btn.data('url');
    const item = btn.closest('.object-item');

    if (confirm('确定要删除这个对象吗？')) {
      $.ajax({
        url: url,
        type: 'POST',
        data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        success: function(res) {
          if (res.status === 'success') {
            item.remove();
            alert(res.message);
          }
        }
      });
    }
  });
});

• 上面的代码用了Bootstrap模态框的事件，如果你不用Bootstrap，只需要调整模态框的显示/隐藏逻辑，AJAX核心逻辑通用。
• 表单渲染可以自定义，别用默认的form.as_p，换成符合你项目样式的结构。
• 成功提示可以用Bootstrap Toast或者其他组件替代alert，体验更好。
• 记得在URLconf里给这些视图配置好对应的URL。

内容的提问来源于stack exchange，提问作者Gug