如何在Django中实现点击按钮弹出另一个HTML页面

一、确保前端依赖引入 #

请确保项目中已引入jQuery和jQuery UI的本地资源（JS和CSS文件），这是实现弹窗功能的基础。

二、修改前端弹窗实现代码 #

替换你现有的脚本代码，用jQuery UI Dialog实现弹窗加载目标页面：

<button data-href='{% url "employeeBulkUpload" companydetail.id %}' id="uploadEmployees" title="Upload Employees" class="btn btn-blue mr-2 px-3 d-block w-100 text-95 radius-round border-2 brc-black-tp10">
  <i class="fa fa-upload"></i>
</button>

<script>
$(document).ready(function () {
  $('#uploadEmployees').click(function() {
    // 创建弹窗容器并加载目标页面内容
    const $dialogContainer = $('<div></div>').load($(this).data('href'));
    
    // 初始化模态弹窗
    $dialogContainer.dialog({
      title: 'Upload Employees',
      width: 650,
      modal: true,
      resizable: false,
      close: function() {
        // 关闭弹窗时销毁容器，避免冗余DOM
        $(this).dialog('destroy').remove();
      }
    });
  });
});
</script>

三、完善后端视图与弹窗页面 #

弹窗HTML页面（示例：employee_bulk_upload.html） #

这个页面需要包含文件上传表单和示例文件下载链接：

<div class="p-4">
  <h4 class="mb-3">批量上传员工数据</h4>
  <!-- 文件上传表单 -->
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="mb-3">
      <label class="form-label">选择上传文件</label>
      <input type="file" class="form-control" name="employee_file" accept=".xlsx,.xls" required>
    </div>
    <button type="submit" class="btn btn-primary me-2">确认上传</button>
    <button type="button" class="btn btn-secondary" onclick="$(this).closest('.ui-dialog-content').dialog('close');">取消</button>
  </form>

  <!-- 示例文件下载区域 -->
  <div class="mt-4 pt-3 border-top">
    <p class="mb-2">如需参考格式，请下载示例文件：</p>
    <a href="{% url 'download_employee_sample' %}" class="btn btn-outline-secondary">下载员工数据示例</a>
  </div>
</div>

Django视图示例 #

编写employeeBulkUpload和下载示例文件的视图逻辑：

from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.conf import settings
import os

def employee_bulk_upload(request, company_id):
    if request.method == 'POST':
        # 处理文件上传逻辑（示例：获取文件、解析、入库等）
        uploaded_file = request.FILES.get('employee_file')
        # 此处添加你的业务代码，比如用pandas解析Excel文件并保存到数据库
        # 上传完成后可关闭弹窗或刷新父页面
        return HttpResponse('<script>window.parent.$(".ui-dialog-content").dialog("close"); window.parent.location.reload();</script>')
    return render(request, 'employee_bulk_upload.html')

def download_employee_sample(request):
    # 示例文件路径（假设放在MEDIA_ROOT目录下）
    sample_file_path = os.path.join(settings.MEDIA_ROOT, 'employee_sample.xlsx')
    with open(sample_file_path, 'rb') as f:
        response = HttpResponse(f.read(), content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
        response['Content-Disposition'] = 'attachment; filename="员工数据示例.xlsx"'
        return response

四、配置URL路由 #

在项目的urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('company/<int:company_id>/employee-bulk-upload/', views.employee_bulk_upload, name='employeeBulkUpload'),
    path('employee-sample-download/', views.download_employee_sample, name='download_employee_sample'),
]

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