Django中如何实现表单提交仅局部刷新而不重载Google Maps区域

你的问题根源是当前表单提交走的是默认整页刷新逻辑，整个页面所有DOM都会被重新渲染，Google Maps实例、已添加的标记/圆圈等对象自然会被清除。只需改成AJAX异步提交表单，仅局部刷新表单所在区域即可，具体实现步骤如下： #

步骤1：给表单区域加唯一ID标识 #

给你的middleSection节点加ID，方便后续JS定位替换内容：

<section class="middleSection p-2" id="middleSection">
<!-- 原有内容保持不变 -->
</section>

步骤2：监听表单提交事件，阻止默认刷新行为 #

页面加入以下JS代码，拦截表单提交，走异步请求：

// 若有多个表单可以给表单加统一类名，替换选择器即可
document.querySelector('#middleSection form').addEventListener('submit', function(e) {
  // 阻止默认整页提交行为
  e.preventDefault();
  const form = this;
  // 构造表单数据对象
  const formData = new FormData(form);
  
  // 发起异步提交请求
  fetch(form.action, {
    method: form.method || 'POST',
    body: formData,
    headers: {
      'X-Requested-With': 'XMLHttpRequest', // 标记为AJAX请求方便后端识别
      'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value // 适配Django CSRF校验
    }
  })
  .then(res => res.text())
  .then(html => {
    // 仅替换中间表单区域内容，地图区域完全不受影响
    document.querySelector('#middleSection').innerHTML = html;
  })
  .catch(err => {
    console.error('表单提交失败:', err);
  })
})

步骤3：改造Django后端视图，适配AJAX请求 #

修改处理表单提交的Django视图，判断是AJAX请求时仅返回局部表单区域的HTML，不要返回带公共头部/底部的整页模板：

from django.shortcuts import render, redirect
from .forms import YourForm

def your_view(request):
    if request.method == 'POST':
        form = YourForm(request.POST)
        if form.is_valid():
            form.save()
            # 提交成功后判断请求类型
            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
                # 渲染对应局部模板即可，和你原本的view参数逻辑保持一致
                return render(request, 'app/passenger/trip.html', {'view': 'trip'})
            # 非AJAX请求走原有重定向逻辑，兼容降级场景
            return redirect('your_view_name')
    else:
        form = YourForm()
    context = {'form': form, 'view': 'trip'}
    # 按请求类型返回对应内容
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        return render(request, 'app/passenger/trip.html', context)
    return render(request, 'your_full_page_template.html', context)

适配说明 #

• 如果trip、upcomingRides、pastRides三个模板内都有表单，可以给所有表单加统一类名比如.async-form，将JS里的选择器替换为.async-form即可批量适配
• 提交过程中可自行添加加载状态提示，不会影响地图区域的任何内容
• 地图初始化逻辑仅需要在整页加载时执行一次即可，不需要在AJAX提交后重复初始化

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