Django中页面跳转时添加加载视图的问题求助

首先修正你views.py里的错误——datatable_view中没有实例化表单，这会导致form.is_valid()直接报错，修正后的代码如下：

def home_view(request):
    context = {}
    context ['form'] = Scraping()
    return render(request,'home.html', context)

def datatable_view(request):
    if request.method =='POST':
        form = Scraping(request.POST)  # 实例化POST表单
        if form.is_valid():
            # 这里添加你的业务逻辑（比如爬虫操作）
            return render(request,'datatable.html')
    else:
        form = Scraping()
    # 处理GET请求或表单验证失败的情况，返回首页
    return render(request, 'home.html', {'form': form})

接下来提供两种可行的加载页实现方案：

方案1：表单提交时直接显示加载层（简单高效） #

这种方式适合常规表单提交场景，用户点击提交后立刻显示加载层，直到新页面加载完成后自动消失。

在home.html中添加以下代码：

<!-- 加载层，默认隐藏 -->
<div id="loading-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); color: white; display: flex; align-items: center; justify-content: center; z-index: 9999;">
  <div>加载中，请稍候...</div>
</div>

<!-- 表单部分 -->
<form id="scraping-form" method="POST" action="{% url 'datatable_view' %}">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit">提交</button>
</form>

<script>
// 监听表单提交事件
document.getElementById('scraping-form').addEventListener('submit', function() {
  // 显示加载层
  document.getElementById('loading-overlay').style.display = 'flex';
});
</script>

方案2：异步提交+加载层+跳转（适合耗时操作） #

如果datatable_view中的业务逻辑（比如爬虫）耗时较长，用异步提交可以避免页面长时间无响应，同时精准控制加载层的显示/隐藏。

后端修改（返回JSON响应） #

from django.http import JsonResponse

def datatable_view(request):
    if request.method == 'POST':
        form = Scraping(request.POST)
        if form.is_valid():
            # 执行耗时业务逻辑（比如爬虫）
            # import time; time.sleep(3)  # 模拟耗时操作
            return JsonResponse({'status': 'success', 'redirect_url': '/datatable/'})
        else:
            return JsonResponse({'status': 'error', 'errors': form.errors})
    return JsonResponse({'status': 'error'})

前端修改（AJAX提交） #

<!-- 加载层 -->
<div id="loading-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); color: white; display: flex; align-items: center; justify-content: center; z-index: 9999;">
  <div>加载中，请稍候...</div>
</div>

<!-- 表单部分 -->
<form id="scraping-form">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="button" id="submit-btn">提交</button>
</form>

<script>
document.getElementById('submit-btn').addEventListener('click', function() {
  const form = document.getElementById('scraping-form');
  const formData = new FormData(form);
  const loadingOverlay = document.getElementById('loading-overlay');

  // 显示加载层
  loadingOverlay.style.display = 'flex';

  // 异步提交表单
  fetch('{% url 'datatable_view' %}', {
    method: 'POST',
    body: formData,
    headers: {
      'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.status === 'success') {
      // 业务处理完成后跳转
      window.location.href = data.redirect_url;
    } else {
      // 表单验证失败，隐藏加载层并提示
      alert('输入有误，请检查表单');
      loadingOverlay.style.display = 'none';
    }
  })
  .catch(error => {
    console.error('请求失败:', error);
    loadingOverlay.style.display = 'none';
    alert('请求出错，请重试');
  });
});
</script>

注意事项 #

确保你的urls.py中已正确配置路由名称，比如：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home_view, name='home'),
    path('datatable/', views.datatable_view, name='datatable_view'),
]

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