Django实现同URL下动态修改HTML切换页面状态的正确方法

你要的同URL无刷新切换流程、低传输开销的需求，用异步请求+JSON状态响应的模式实现就行，完全不需要后端返回完整HTML，传输数据量能压到原来的1%不到，服务端压力也小。

核心逻辑很简单：三个流程阶段的界面本来就提前写在同一个页面里，后端只需要告诉前端“当前邮箱对应哪个流程”，前端自己控制界面块的显示隐藏就够了。

第一步：前端提前写好三个状态的页面块 #

不用等后端传HTML，同一个页面里把三个状态的DOM都提前写好，默认只显示邮箱输入块，剩下两个块先隐藏：

<!-- 同URL下的三个流程块，无整页跳转 -->
<div id="block-email">
  <input type="email" id="input-email" placeholder="请输入邮箱地址">
  <button id="btn-next">下一步</button>
  <p id="email-tip" style="color:red;display:none;"></p>
</div>

<!-- 已注册用户的密码输入块，默认隐藏 -->
<div id="block-login" hidden>
  <p>登录账号：<span id="show-current-email"></span></p>
  <input type="password" placeholder="请输入登录密码">
  <button>确认登录</button>
</div>

<!-- 新用户的注册块，默认隐藏 -->
<div id="block-register" hidden>
  <p>该邮箱暂未注册，请设置密码完成注册</p>
  <input type="password" placeholder="设置6位以上登录密码">
  <button>注册并登录</button>
</div>

第二步：Django后端写轻量状态接口 #

这个接口不用渲染模板，接收前端传的邮箱，查库判断用户是否存在，只返回最精简的JSON状态码就行，连多余字段都不用加：

from django.http import JsonResponse
from django.contrib.auth import get_user_model
import json

User = get_user_model()

def check_email(request):
    if request.method != "POST":
        return JsonResponse({"code": 405, "msg": "请求方式错误"})
    # 解析前端传的参数
    req_data = json.loads(request.body)
    input_email = req_data.get("email", "").strip()
    # 基础格式校验
    if not input_email or "@" not in input_email:
        return JsonResponse({"code": 0, "msg": "请输入有效的邮箱地址"})
    # 查库判断账号是否存在
    has_user = User.objects.filter(email=input_email).exists()
    if has_user:
        # code=1 代表走登录输密码流程
        return JsonResponse({"code": 1})
    else:
        # code=2 代表走注册流程
        return JsonResponse({"code": 2})

写完给这个视图配好路由就行，记得处理CSRF校验问题——要么前端请求的时候带上cookie里的csrftoken，要么本地测试的时候临时给视图加@csrf_exempt装饰器，上线前记得改回来。

第三步：前端发异步请求+根据状态切界面 #

给“下一步”按钮绑点击事件，不要用form默认的提交跳转，用fetch发异步请求，拿到后端返回的状态码之后，直接控制三个块的显隐：

// 提前从cookie取csrftoken的逻辑，新手可以直接抄
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
const csrftoken = getCookie('csrftoken');

document.getElementById("btn-next").addEventListener("click", async () => {
  const email = document.getElementById("input-email").value.trim();
  const tipDom = document.getElementById("email-tip");
  // 发请求给后端
  const resp = await fetch("/check-email/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRFToken": csrftoken
    },
    body: JSON.stringify({email: email})
  })
  const result = await resp.json();
  // 先把所有块隐藏
  document.getElementById("block-email").hidden = true;
  document.getElementById("block-login").hidden = true;
  document.getElementById("block-register").hidden = true;
  tipDom.style.display = "none";
  // 根据返回状态显示对应块
  switch(result.code) {
    case 0:
      tipDom.textContent = result.msg;
      tipDom.style.display = "block";
      document.getElementById("block-email").hidden = false;
      break;
    case 1:
      document.getElementById("show-current-email").textContent = email;
      document.getElementById("block-login").hidden = false;
      break;
    case 2:
      document.getElementById("block-register").hidden = false;
      break;
  }
})

• 传输开销极低：每次接口返回的数据只有几十字节，相比返回几KB甚至几十KB的HTML片段，流量和服务端渲染压力都小很多
• 交互流畅：所有界面块都是页面初次加载时就渲染好的，切换的时候没有白屏等待，比后端返回HTML再插入页面的体验好很多
• 维护方便：前后端职责拆分清晰，后端只管返回状态，前端只管界面展示，后续要改界面样式、加提示文案都不用动后端代码

新手注意：接口返回的时候不要带敏感信息，比如用户的密码哈希、内部用户ID这类内容，返回状态码就够了，后续用户输完密码/注册信息，再把邮箱和对应内容一起传给后端做校验即可。

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