Django：如何点击按钮不跳转URL打开小窗口提交表单并保存数据？

该需求需要搭配JS实现无跳转交互，若你项目已引入Bootstrap可直接使用自带模态框组件，无需额外引入依赖

步骤1：替换原跳转按钮 #

将原跳转a标签替换为模态框触发按钮，同时将患者ID存入按钮自定义属性供后续提交使用：

<!-- Bootstrap 5 版本写法，若使用Bootstrap3，将data-bs-*替换为data-*即可 -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#chirurgieModal" 
        data-patient-id="{{ patients.id }}">
  Nouvelle Chirurgie
</button>

步骤2：模板新增模态框表单 #

在当前页面模板任意位置添加模态框DOM，内部放置你业务需要的表单字段：

<div class="modal fade" id="chirurgieModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">新增手术记录</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="chirurgieForm">
        {% csrf_token %}
        <div class="modal-body">
          <!-- 以下表单字段可根据你的实际业务需求调整，和原有register_visit页面字段保持一致即可 -->
          <div class="mb-3">
            <label class="form-label">手术名称</label>
            <input type="text" class="form-control" name="surgery_name" required>
          </div>
          <div class="mb-3">
            <label class="form-label">手术时间</label>
            <input type="date" class="form-control" name="surgery_date" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>

步骤3：添加JS交互逻辑 #

在模板底部添加JS代码，实现模态框数据传递、无刷新表单提交：

<script>
// 模态框打开时获取对应患者ID
const chirurgieModal = document.getElementById('chirurgieModal')
let currentPatientId = null
chirurgieModal.addEventListener('show.bs.modal', e => {
  currentPatientId = e.relatedTarget.getAttribute('data-patient-id')
})

// 监听表单提交事件
document.getElementById('chirurgieForm').addEventListener('submit', e => {
  e.preventDefault() // 阻止默认表单跳转
  const formData = new FormData(this)

  // 发送AJAX请求
  fetch(`/register_visit/${currentPatientId}/`, { // 也可以用{% url 'register_visit' 0 %}.replace('0', currentPatientId) 生成路径
    method: 'POST',
    body: formData,
    headers: {
      'X-Requested-With': 'XMLHttpRequest' // 标记为AJAX请求
    }
  })
  .then(res => res.json())
  .then(data => {
    if(data.status === 'success') {
      // 保存成功后关闭模态框、重置表单，可自行添加页面局部更新逻辑
      bootstrap.Modal.getInstance(chirurgieModal).hide()
      this.reset()
      alert('保存成功')
    } else {
      alert('保存失败：' + data.msg)
    }
  })
  .catch(err => alert('请求出错，请重试'))
})
</script>

步骤4：修改视图适配AJAX请求 #

调整原register_visit视图逻辑，支持接收AJAX请求并返回JSON响应：

from django.http import JsonResponse
from .models import Visit # 替换为你自己的业务模型
from .forms import VisitForm # 若你使用Django Form则引入，否则可忽略

def register_visit(request, patient_id):
    # 处理AJAX POST请求
    if request.method == 'POST' and request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
        # 如果你使用Django Form，可直接校验保存
        form = VisitForm(request.POST)
        if form.is_valid():
            visit = form.save(commit=False)
            visit.patient_id = patient_id # 关联对应患者
            visit.save()
            return JsonResponse({'status': 'success', 'msg': '保存成功'})
        else:
            return JsonResponse({'status': 'error', 'msg': form.errors.as_json()})
        
        # 如果你不使用Django Form，手动取值保存即可
        # surgery_name = request.POST.get('surgery_name')
        # surgery_date = request.POST.get('surgery_date')
        # Visit.objects.create(
        #     patient_id=patient_id,
        #     surgery_name=surgery_name,
        #     surgery_date=surgery_date
        # )
        # return JsonResponse({'status': 'success', 'msg': '保存成功'})
    
    # 原有的非AJAX请求逻辑可以保留，不影响原有功能使用
    # 原有视图代码...

注意事项 #

• 保存成功后如果需要实时更新页面上的手术记录列表，可在AJAX请求成功的回调中手动操作DOM更新，无需刷新整个页面
• 若你的项目未引入Bootstrap，可自行用原生JS实现弹出层逻辑，AJAX提交部分和视图层逻辑保持一致即可

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