Django中表单提交后如何用原生JavaScript实现动态重定向？

针对你在Django中用原生JS实现表单提交后重定向的需求，分两种常见场景给你解决方案：

1. 固定URL重定向 #

如果目标URL是固定的（比如用户个人主页），直接在延迟逻辑里添加window.location.href即可，把重定向放在setTimeout回调里，确保用户看到成功提示后再跳转：

book.addEventListener('submit', (e) => {
    e.preventDefault();
    const submitButton = document.getElementById('book');
    submitButton.disabled = true;
    submitButton.innerHTML = 'Booking...';
    setTimeout(() => {
        submitButton.innerHTML = `<i class="fa-solid fa-check" style="color: white; text-align: center;"></i>`;
        // 替换为你的Django profile页面URL，比如'/accounts/profile/'
        window.location.href = '/accounts/profile/';
    }, 1000);
});

2. 动态URL重定向（根据后端返回结果跳转） #

如果需要根据表单提交后的后端响应决定跳转地址（比如不同提交结果跳不同页面），用fetch提交表单数据，再从响应中获取目标URL：

book.addEventListener('submit', (e) => {
    e.preventDefault();
    const submitButton = document.getElementById('book');
    submitButton.disabled = true;
    submitButton.innerHTML = 'Booking...';

    // 收集表单数据
    const formData = new FormData(e.target);

    // 提交到Django表单处理视图
    fetch(e.target.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        // 后端返回的JSON需包含redirect_url字段
        setTimeout(() => {
            submitButton.innerHTML = `<i class="fa-solid fa-check" style="color: white; text-align: center;"></i>`;
            window.location.href = data.redirect_url;
        }, 1000);
    })
    .catch(error => {
        // 提交失败时恢复按钮状态
        submitButton.disabled = false;
        submitButton.innerHTML = 'Book Now';
        console.error('提交出错:', error);
    });
});

对应的Django视图需返回含redirect_url的JSON响应，示例：

from django.http import JsonResponse

def book_view(request):
    if request.method == 'POST':
        # 处理表单逻辑
        # ...
        # 根据处理结果生成跳转URL
        redirect_url = '/accounts/profile/'  # 可根据业务动态生成
        return JsonResponse({'redirect_url': redirect_url})

注意：Django的POST请求需携带CSRF令牌，上述JS代码已通过页面中默认生成的csrfmiddlewaretoken隐藏字段处理，确保你的表单包含该字段。

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